React Listen und Schlüssel

Einführung

In React müssen Sie oft mehrere ähnliche Komponenten aus einer Datensammlung anzeigen. Sie können JavaScript-Array-Methoden wie map() verwenden, um ein Datenarray zu manipulieren und es in ein Array von JSX-Elementen umzuwandeln.

Ein "Key" ist ein spezielles String-Attribut, das Sie beim Erstellen von Elementlisten einschließen müssen. Keys helfen React dabei, zu identifizieren, welche Elemente sich geändert, hinzugefügt oder entfernt wurden. Dies ermöglicht es React, die Benutzeroberfläche effizient zu aktualisieren.

In diesem Lab lernen Sie, wie Sie ein Datenarray nehmen, es in eine Liste von Komponenten umwandeln und rendern, während Sie gleichzeitig die entscheidende Rolle des key-Props verstehen.

Array von Elementen in der Komponente erstellen

In diesem Schritt definieren Sie zunächst die Daten, die Sie als Liste anzeigen möchten. In den meisten Anwendungen würden diese Daten von einer API oder einer Datenbank stammen, aber für dieses Lab definieren wir ein einfaches Array direkt in unserer Komponente.

Stellen Sie zunächst sicher, dass Sie sich im richtigen Verzeichnis befinden. Ihre React-Anwendung my-app wurde im Verzeichnis /home/labex/project erstellt.

Öffnen Sie mit dem Dateiexplorer auf der linken Seite der WebIDE die Datei my-app/src/App.jsx.

Definieren Sie innerhalb der App-Komponentenfunktion, vor der return-Anweisung, eine Konstante namens products, die ein Array von Strings sein wird.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  return (
    <>
      <h1>My Product List</h1>
    </>
  );
}

export default App;

Zu diesem Zeitpunkt ist das Array definiert, aber noch nicht gerendert. Im nächsten Schritt erfahren Sie, wie Sie diese Daten anzeigen.

Array mit map-Methode auf JSX-Elemente abbilden

In diesem Schritt verwenden Sie die JavaScript map()-Methode, um Ihr products-Array in eine Liste von JSX-Elementen umzuwandeln. Die map()-Methode erstellt ein neues Array, indem sie eine Funktion für jedes Element des ursprünglichen Arrays aufruft.

Wir werden jeden Produkt-String auf ein <li> (Listenelement) abbilden.

Ändern Sie Ihre Datei src/App.jsx. Betten Sie die Mapping-Logik innerhalb von geschweiften Klammern {} in die return-Anweisung ein.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product) => <li>{product}</li>);

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Installieren wir nun die Projekt-Abhängigkeiten und starten den Entwicklungsserver, um das Ergebnis zu sehen.

Öffnen Sie ein neues Terminal in der WebIDE. Navigieren Sie zuerst zu Ihrem Projektverzeichnis:

cd my-app

Installieren Sie als Nächstes die Abhängigkeiten:

npm install

Starten Sie schließlich den Entwicklungsserver. Die Flags --host und --port sind notwendig, um die Anwendung innerhalb der LabEx-Umgebung zugänglich zu machen.

npm run dev -- --host 0.0.0.0 --port 8080

Nachdem der Server gestartet ist, wechseln Sie zum Tab Web 8080 in Ihrer LabEx-Oberfläche. Sie sollten Ihre Produktliste sehen. Wenn Sie jedoch die Entwicklerkonsole des Browsers öffnen (Rechtsklick -> Untersuchen -> Konsole), sehen Sie eine Warnung: Warning: Each child in a list should have a unique "key" prop. Dies beheben wir im nächsten Schritt.

Eindeutige key-Prop für jedes Listenelement zuweisen

In diesem Schritt beheben Sie die Konsolenwarnung, indem Sie jedem Listenelement einen eindeutigen key zuweisen. Schlüssel sind für React entscheidend, um die Identität jedes Elements zu verfolgen, was bei der effizienten Neuerstellung der Liste hilft, wenn sich Daten ändern.

Der beste Weg, einen Schlüssel auszuwählen, ist die Verwendung einer Zeichenkette, die ein Listenelement eindeutig unter seinen Geschwistern identifiziert. Meistens würden Sie IDs aus Ihren Daten verwenden.

Lassen Sie uns unsere Daten in ein Array von Objekten ändern, wobei jedes Objekt eine eindeutige id hat. Aktualisieren Sie src/App.jsx wie folgt. Wir werden die id jedes Produkts als seinen Schlüssel verwenden.

function App() {
  const products = [
    { id: "p1", name: "Laptop" },
    { id: "p2", name: "Mouse" },
    { id: "p3", name: "Keyboard" },
    { id: "p4", name: "Monitor" }
  ];

  const listItems = products.map((product) => (
    <li key={product.id}>{product.name}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Beachten Sie die key={product.id}-Prop, die dem <li>-Element hinzugefügt wurde. Der Schlüssel ist eine spezielle Prop, die von React intern verwendet wird und nicht an Ihre Komponente weitergegeben wird.

Nachdem Sie die Datei gespeichert haben, überprüfen Sie erneut den Tab Web 8080 und die Entwicklerkonsole. Die Liste sollte wie zuvor gerendert werden, aber die Warnung bezüglich fehlender Schlüssel wird verschwunden sein.

Index als Key verwenden, wenn keine eindeutige ID verfügbar ist

In diesem Schritt lernen Sie, wie Sie Situationen handhaben, in denen Ihre Daten keine stabilen, eindeutigen IDs haben. In solchen Fällen können Sie als letzte Option den Index des Elements im Array verwenden.

Die map()-Funktion stellt den Index des aktuellen Elements als optionales zweites Argument bereit. Sie können diesen Index für den Schlüssel verwenden.

Lassen Sie uns unser products-Array zu einem einfachen Array von Zeichenketten zurücksetzen und den Index als Schlüssel verwenden. Ändern Sie src/App.jsx:

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Wichtiger Hinweis: Die Verwendung des Index als Schlüssel wird nicht empfohlen, wenn sich die Reihenfolge der Elemente ändern kann. Dies kann sich negativ auf die Leistung auswirken und Probleme mit dem Komponentenstatus verursachen. Wenn Sie Elemente aus der Liste sortieren, hinzufügen oder entfernen, ändern sich die Indizes, was den Rendering-Algorithmus von React verwirren kann. Verwenden Sie ihn nur, wenn die Liste statisch ist und niemals neu geordnet wird.

Gemappte Liste innerhalb eines ul- oder ol-Tags rendern

In diesem Schritt werden Sie Ihre Listenelemente in ein <ul> (ungeordnete Liste) oder <ol> (geordnete Liste) Tag einschließen. Dies ist wichtig für die Erstellung semantisch korrekten HTMLs, was gut für Barrierefreiheit (Accessibility) und SEO ist.

Derzeit rendern wir eine Reihe von <li>-Elementen direkt innerhalb eines Fragments (<>...</>). Lassen Sie uns unsere listItems-Variable in ein <ul>-Tag einschließen, um eine ordnungsgemäße ungeordnete Liste zu erstellen.

Aktualisieren Sie Ihre src/App.jsx mit dem endgültigen Code:

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      <ul>{listItems}</ul>
    </>
  );
}

export default App;

Gehen Sie nun zurück zum Tab Web 8080. Sie werden sehen, dass Ihre Liste nun ordnungsgemäß mit Aufzählungspunkten formatiert ist, wie es von einem Standard-HTML-<ul>-Element erwartet wird. Sie haben erfolgreich eine dynamische Liste in React mit korrekten Schlüsseln und semantischem HTML gerendert.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs!

In diesem Lab haben Sie die grundlegenden Konzepte des Renderns von Listen in React gelernt. Sie haben geübt:

• Definieren eines Datenarrays innerhalb einer Komponente.
• Verwenden der map()-Methode, um ein Datenarray in ein Array von JSX-Elementen zu transformieren.
• Die kritische Bedeutung des key-Props für Listenelemente, um React bei effizientem Rendering zu helfen.
• Wie man stabile, eindeutige IDs aus Ihren Daten als Schlüssel verwendet.
• Wie man den Array-Index als Schlüssel als letzte Option verwendet und welche Nachteile dies haben kann.
• Einschließen Ihrer Listenelemente in <ul> oder <ol> für semantisches HTML.

Diese Fähigkeiten sind unerlässlich für die Erstellung dynamischer und datengesteuerter Anwendungen mit React.