Die for-Schleife in React

1. Implementieren Sie for Map mit der Methode .map() in React
2. JavaScript for-Schleife
3. Sofort aufgerufene Funktion

Der Umgang mit komplexen Backend-Daten gehört zum Job des Frontend-Entwicklers. Häufig enthalten die Daten eine Liste von Objekten, die Komponenten oder andere Bausteine ​​für die Benutzeroberfläche darstellen.

Wenn Sie beispielsweise einen Online-Shop erstellen, enthalten die Daten wahrscheinlich die Liste der Produkte, die auf der Website erscheinen müssen. Das manuelle Durchgehen der Liste und das Erstellen von Komponenten nacheinander ist aus mehreren Gründen ineffizient. Was werden Sie beispielsweise tun, wenn ein Produkt entfernt oder zur Liste hinzugefügt wird? Sie können nicht jedes Mal zurückgehen und Ihre JSX-Datei aktualisieren.

Es gibt mehrere Möglichkeiten, die Liste zu durchlaufen und Komponenten oder HTML-Elemente automatisch zu rendern.

Implementieren Sie for Map mit der Methode .map() in React

Die Methode .map(), die in ES6 eingeführt wurde, ist die Standardmethode, um ein Array zu durchlaufen und ein gültiges JSX-Element zurückzugeben, das Daten von jedem Element im Array enthält. Entwickler verwenden diese Methode häufig, um benutzerdefinierte Komponenten sowie normale HTML-Elemente zu erstellen.

Obwohl es andere Möglichkeiten gibt, eine Schleife auszuführen, verwenden die meisten React-Entwickler die Methode .map(), weil sie einfach zu lesen, zu schreiben und zu warten ist. So durchlaufen Sie ein Array von Objekten und rendern Benutzerdaten auf dem Bildschirm:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    console.log('App started');
    return <div>
    {data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
    </div>
  }
}

Ausgabe:

John Doe, 44 years old

Jane Doe, 45 years old

Denken Sie daran, dass die Methode map() in diesem Beispiel zweimal ausgeführt wird und jedes Mal ein Absatzelement zurückgibt. Deshalb ist es wichtig, seine Ergebnisse mit einem <div></div> zu umschließen. Jede Komponente muss einen übergeordneten Container mit beliebig vielen untergeordneten Elementen zurückgeben.

Schlüssel-Attribut

Denken Sie daran, dass jedes Element, das mit der Methode .map() erstellt wurde, einen key-Bezeichner haben muss, der auf einen eindeutigen Wert gesetzt ist.

<p key={person.name}>{}</p>)

React empfiehlt nicht, den Wert index zu verwenden, um einen eindeutigen Wert für die Eigenschaft key zu generieren.

Weitergabe von props

Wenn Sie die Methode .map() verwenden, um mehrere Komponenten zu rendern, können Sie die props auch weitergeben.

Nehmen wir an, wir versuchen, mehrere Product-Komponenten zu rendern. So würden wir die props übergeben:

return <div>
    {data.map(product => <Product price={product.price} name={product.name}></Product>)}
    </div>

JavaScript for-Schleife

Eine andere Möglichkeit, ein Array zu durchlaufen, besteht darin, die for-Schleife zu verwenden. Wenn Sie diese Vorgehensweise wählen, müssen Sie die Schleife oberhalb des return-Blocks ausführen.

So würde der Code aussehen:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    let persons = [];
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return <div>
    {persons}
    </div>
  }
}

Im Vergleich zu .map() ist dieser Ansatz ausführlicher und schwerer zu verstehen. Die Ergebnisse wären jedoch die gleichen.

Sofort aufgerufene Funktion

Es ist technisch möglich, die for-Schleife in Ihrer return-Anweisung zu verwenden, aber Sie müssten eine Funktion erstellen und die for-Schleife als Rumpf verwenden. Wenn Sie mit dem Schreiben der Funktion fertig sind, sollten Sie ihr mit Klammern () folgen, um sie sofort aufzurufen. So würde es funktionieren:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    return 
    <div>
    {function() {
      let persons = []
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return persons
    }()
    }</div>
  }
}