Heim >Web-Frontend >js-Tutorial >Wie rendere ich Arrays von Objekten in React?

Wie rendere ich Arrays von Objekten in React?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-06 03:26:02624Durchsuche

How to Render Arrays of Objects 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn