Wie zeige ich ein Array von Objekten in React an?-js-Tutorial-php.cn

Wie zeige ich ein Array von Objekten in React an?

Barbara Streisand

Freigeben： 2024-11-07 21:13:02

Original

968 Leute haben es durchsucht

How to Display an Array of Objects in React?

So zeigen Sie ein Array von Objekten in React an

In React erfordert die Anzeige eines Arrays von Objekten einen Zuordnungsprozess, um das Array in sichtbare Elemente umzuwandeln.

Arrays gerenderten Elementen zuordnen

Um ein Array von Objekten zu rendern, können Sie die Funktion .map() verwenden. Diese Funktion benötigt eine Rückruffunktion, die einzelne Array-Elemente als Eingabe akzeptiert.

Option 1: Zugeordnete Elemente in einer Variablen speichern

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

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

Nach dem Login kopieren

Hier wird die Variable listItems gespeichert die zugeordneten Elemente, die dann innerhalb eines

gerendert werden.

Option 2: Direkte Zuordnung in der Rückgabe

Alternativ können Sie auf die Notwendigkeit eines verzichten Zwischenvariable:

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

Nach dem Login kopieren

In dieser Variante wird die Mapping-Funktion direkt innerhalb der Return-Anweisung aufgerufen.

Schlüssel für eindeutige Bezeichner

Wann Beim Rendern von Arrays ist es wichtig, für jedes Element eindeutige Schlüssel bereitzustellen. Bei beiden Optionen wird jedem gerenderten Element ein Schlüssel hinzugefügt, um die Renderleistung zu optimieren und effiziente Aktualisierungen zu ermöglichen.

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