Grundlegendes zum Rendern von Arrays in React

Einführung

In diesem Artikel erfahren Sie, wie eine Anordnung in React gerendert wird und welche bewährten Verfahren beim Rendern verschiedener Elemente innerhalb von Komponenten anzuwenden sind.

Einer der Vorteile der Verwendung einer modernen Websprache wie JavaScript ist, dass Sie die Erzeugung von HTML schnell automatisieren können.

Wenn Sie so etwas wie eine Schleife gegen eine Anordnung oder ein Objekt verwenden, müssen Sie das HTML pro Element nur einmal schreiben.  Besser noch, alle zukünftigen Bearbeitungen müssen nur einmal angewendet werden.

Rendern mehrerer Elemente

Um mehrere JSX-Elemente in React zu rendern, können Sie eine Anordnung mit der .map() -Methode durchlaufen und ein einzelnes Element zurückgeben.

Unten durchlaufen Sie die reptiles-Anordnung und geben ein li-Element für jedes Element in der Anordnung zurück. Sie können diese Methode verwenden, wenn Sie ein einzelnes Element für jedes Element in der Anordnung anzeigen möchten:

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

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

Die Ausgabe sieht in etwa folgendermaßen aus:

Output
- alligator
- snake
- lizard

Im nächsten Beispiel prüfen Sie, warum Sie einen eindeutigen key zu einer Liste von Elementen hinzufügen möchten, die von einer Anordnung gerendert werden.

Rendern einer Sammlung von Elementen innerhalb einer Komponente

In diesem Beispiel durchlaufen Sie eine Anordnung und erstellen wie im vorherigen Beispiel eine Reihe von Listenelementkomponenten.

Zu Beginn aktualisieren Sie den Code, um die <ol>-Komponente zum Speichern der <li>-Elemente zu verwenden. Die <ol>-Komponente erstellt eine geordnete Liste der Elemente:

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

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

Wenn Sie jedoch auf die Konsole schauen, sehen Sie eine Warnung, dass jedes untergeordnete Element in einer Anordnung oder einem Iterator einen eindeutigen Schlüssel haben sollte.

Die Warnung erscheint, da Sie beim Versuch, eine Sammlung innerhalb einer Komponente zu rendern, einen key hinzufügen müssen.

In React wird ein eindeutiger key verwendet, um zu bestimmen, welche der Komponenten in einer Sammlung neu gerendert werden müssen. Durch das Hinzufügen eines eindeutigen keys wird verhindert, dass React bei jeder Aktualisierung die gesamte Komponente neu rendern muss.

In diesem Schritt rendern Sie mehrere Elemente in einer Komponente und fügen einen eindeutigen key hinzu. Aktualisieren Sie den Code so, dass er einen key für die Listenelemente beinhaltet, um die Warnung zu beheben:

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

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

Nachdem Sie nun einen key hinzugefügt haben, wird die Warnung nicht mehr in der Konsole angezeigt.

Im nächsten Beispiel sehen Sie, wie Sie benachbarte Elemente rendern können, ohne auf einen üblichen Syntaxfehler zu stoßen.

Rendern benachbarter Elemente

Um mehr als ein Element in einer Komponente zu rendern, müssen Sie einen Wrapper um diese Elemente hinzufügen.

In diesem Beispiel geben Sie zunächst eine Liste von Elementen zurück, ohne eine Schleife durch eine Anordnung zu bilden:

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

Dadurch erhalten Sie einen schweren Fehler in der Konsole:

Um diesen Fehler zu beheben, müssen Sie den Block von li-Elementen in einem Wrapper einpacken. Für eine Liste können Sie diese in ein ol oder ul packen:

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

Die angrenzenden <li>-Elemente werden jetzt in ein umschließendes Tag <ol> eingehüllt,und Sie werden keinen Fehler mehr sehen.

Im nächsten Abschnitt werden Sie eine Liste mit Hilfe einer Fragment-Komponente in einem Wrapper rendern.

Rendern benachbarter Elemente mit React.fragment

Vor React v16.2 können Sie einen Block von Komponenten in ein <div>-Element einpacken. Dies würde zu einer Anwendung voller divs führen, die oft als “div soup” bezeichnet wird.

Um dieses Problem zu beheben, hat React eine neue Komponente veröffentlicht, die als Fragment-Komponente bekannt ist:

Wenn Sie eine Liste innerhalb eines umschließenden Tags rendern müssen, aber vermeiden möchten, dass Sie eine div benutzen, können Sie stattdessen React.Fragment verwenden:

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

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

Beachten Sie auch, dass mit React.fragment keine Notwendigkeit besteht, einen Schlüssel hinzuzufügen.

Sie werden feststellen, dass das Schreiben von React.fragment mühsamer als das Hinzufügen einer <div> ist. 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>snake</li>
    <li>lizard</li>
 </>
  );
}

Zusammenfassung

In diesem Artikel haben Sie verschiedene Beispiele für das Rendern von Anordnungen in einer React-Anwendung untersucht.

Wenn Sie ein Element innerhalb einer anderen Komponente rendern, sollten Sie einen eindeutigen key verwenden und Ihre Elemente innerhalb eines Wrappers umfassen.

Je nach Anwendungsfall können Sie einfache Listen erstellen, die in eine Fragment-Komponente gepackt werden und keinen Schlüssel benötigen.

Um mehr über bewährte Praktiken in React zu erfahren, folgen Sie der vollständigen Reihe Wie man in React.js codiert auf DigitalOcean.