Einführung: Arrays in React rendern

React bietet vielfältige Möglichkeiten, Arrays und Elemente in Ihren Komponenten zu rendern. In diesem Artikel lernen Sie, wie Sie Arrays in React effektiv rendern und bewährte Praktiken zur Anwendung bringen.

Einer der Vorteile der Verwendung einer modernen Web-Sprache wie JavaScript besteht darin, dass Sie die Generierung von HTML-Teilen schnell automatisieren können. Durch die Verwendung einer Schleife gegen ein Array oder ein Objekt müssen Sie den HTML-Code pro Element nur einmal schreiben. Besser noch, zukünftige Änderungen müssen nur einmal durchgeführt werden.

Rendern von mehreren Elementen

Um mehrere JSX-Elemente in React zu rendern, können Sie durch ein Array mit der Methode .map() iterieren und ein einzelnes Element zurückgeben. Unten durchlaufen Sie das Array "reptiles" und geben für jedes Element im Array ein <li>-Element zurück. Sie können diese Methode verwenden, wenn Sie ein einzelnes Element für jedes Element im Array anzeigen möchten:

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

Die Ausgabe wird folgendermaßen aussehen:

• Alligator
• Schlange
• Eidechse

Im nächsten Beispiel werden wir erklären, warum Sie einer Liste von Elementen, die von einem Array gerendert werden, eine eindeutige Schlüssel hinzufügen möchten.

Rendern einer Sammlung von Elementen innerhalb einer Komponente

In diesem Beispiel durchlaufen Sie ein Array und erstellen eine Liste von Listen-Elementen, ähnlich wie im vorherigen Beispiel. Aktualisieren Sie den Code zunächst, um das <ol>-Element zum Halten der <li>-Elemente zu verwenden. Das <ol>-Element erstellt eine geordnete Liste der Elemente:

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

Wenn Sie jedoch in die Konsole schauen, sehen Sie eine Warnung, dass jedes Kind in einem Array oder Iterator einen eindeutigen Schlüssel haben sollte.

Die Warnung erscheint, weil Sie beim Versuch, eine Sammlung innerhalb einer Komponente zu rendern, einen Schlüssel hinzufügen müssen. In React wird ein eindeutiger Schlüssel verwendet, um festzustellen, welche der Komponenten in einer Sammlung neu gerendert werden muss. Das Hinzufügen eines eindeutigen Schlüssels verhindert, dass React die gesamte Komponente bei jeder Aktualisierung neu rendern muss.

Rendern von benachbarten Elementen

In JSX müssen Sie, um mehr als ein Element in einer Komponente zu rendern, eine Umhüllung um sie hinzufügen. In diesem Beispiel geben Sie zuerst eine Liste von Elementen zurück, ohne durch ein Array zu iterieren:

function ReptileListItems() {
  return (
    <li>Alligator</li>
    <li>Schlange</li>
    <li>Eidechse</li>
  );
}

Dies führt zu einem schwerwiegenden Fehler in der Konsole.

Um diesen Fehler zu beheben, müssen Sie den Block von <li>-Elementen in eine Umhüllung einschließen. Für eine Liste können Sie sie in ein <ol>- oder <ul>-Element einwickeln:

function ReptileListItems() {
  return (
    <ol>
      <li>Alligator</li>
      <li>Schlange</li>
      <li>Eidechse</li>
    </ol>
  );
}

Die benachbarten <li>-Elemente sind jetzt in einem umgebenden Tag, <ol>, eingeschlossen, und es wird kein Fehler mehr angezeigt.

Im nächsten Abschnitt erfahren Sie, wie Sie eine Liste in einer Umhüllung mithilfe einer Fragment-Komponente rendern.

Rendern von benachbarten Elementen mit React.Fragment

Vor React Version 16.2 konnten Sie eine Gruppe von Komponenten in ein <div>-Element einwickeln. Dies führte zu einer Anwendung, die voll von <div>-Elementen war und oft als "div soup" bezeichnet wurde. Um dieses Problem zu beheben, hat React eine neue Komponente namens Fragment-Komponente veröffentlicht:

Wenn Sie eine Liste in einem umschließenden Tag rendern müssen, aber keine <div> verwenden möchten, können Sie stattdessen React.Fragment verwenden:

function ReptileListItems() {
  return (
    <React.Fragment>
      <li>Alligator</li>
      <li>Schlange</li>
      <li>Eidechse</li>
    </React.Fragment>
  );
}

Der gerenderte Code enthält nur die <li>-Elemente, und die React.Fragment-Komponente wird im Code nicht angezeigt.

Außerdem müssen Sie mit React.Fragment keinen Schlüssel hinzufügen.

Möglicherweise stellen Sie fest, dass das Schreiben von React.Fragment mühsamer ist als das Hinzufügen eines <div>. Glücklicherweise hat das React-Team eine kürzere Syntax entwickelt, um diese Komponente zu repräsentieren. Sie können <> </> anstelle von <React.Fragment></React.Fragment> verwenden:

function ReptileListItems() {
  return (
    <>
      <li>Alligator</li>
      <li>Schlange</li>
      <li>Eidechse</li>
    </>
  );
}

In dieser Einführung mit Tipps haben Sie verschiedene Beispiele dafür untersucht, wie Sie in einer React-Anwendung Arrays rendern können. Beim Rendern eines Elements innerhalb einer anderen Komponente sollten Sie einen eindeutigen Schlüssel verwenden und Ihre Elemente in einem Wrapper-Element einschließen. Je nach Anwendungsfall können Sie einfache Listen in einer Fragment-Komponente rendern, die keinen Schlüssel benötigt.