Wie rendere ich Arrays von Objekten in React?

Arrays von Objekten in React rendern

In React erfordert die Anzeige einer Liste von Daten aus einem Array von Objekten einen etwas anderen Ansatz als traditionell HTML.

Ansatz 1: Erstellen Sie ein Array von React-Elementen

Eine Möglichkeit, ein Array von Objekten in React zu rendern, besteht darin, zunächst jeweils ein Array von React-Elementen zu erstellen stellt ein einzelnes Element im Array dar. Hier ist ein Beispiel:

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

  return (
    <div>
      {listItems}
    </div>
  );
}

Dieser Ansatz erstellt ein neues React-Element für jedes Element im Array und stellt sicher, dass jedes Element einen eindeutigen Schlüssel zur Identifizierung hat.

Ansatz 2: Inline-Map-Funktion in Return

Eine alternative Methode besteht darin, die Mapping-Funktion direkt in die JSX-Return-Anweisung einzubinden:

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  return (
    <div>
      {data.map((d, idx) => <li key={idx}>{d.name}</li>)}
    </div>
  );
}

Dieser Ansatz macht die Erstellung eines separaten Arrays überflüssig React-Elemente machen den Code prägnanter.

Schlüsseleigenschaft

Beim Rendern einer Liste von Objekten ist es wichtig, jedem React-Element eine eindeutige Schlüsseleigenschaft zuzuweisen. Dadurch kann React bestimmte Elemente im DOM effizient identifizieren und aktualisieren, wenn sich die Daten ändern.

Das obige ist der detaillierte Inhalt vonWie rendere ich Arrays von Objekten in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!