Wie rendere ich ein Array von Objekten in React mithilfe der Map-Funktion?

Rendern eines Arrays von Objekten in React

Das Rendern von Listen in React ist für die Anzeige dynamischer Daten unerlässlich. Dieser Leitfaden zeigt, wie Sie mithilfe der Kartenfunktion ein Array von Objekten in React effizient rendern.

Ansatz:

Berücksichtigen Sie die folgende React-Komponente:

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

    return (
      <div>
        Hello
      </div>
    );
  }
}</code>

Es gibt zwei Hauptansätze zum Rendern des Arrays von Objekten:

Erster Ansatz:

Weisen Sie das zugeordnete Array einer Variablen zu und geben Sie es innerhalb der Renderfunktion zurück :

<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>

Zweiter Ansatz:

Betten Sie die Kartenfunktion direkt in die Return-Anweisung ein:

<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>

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