Listen reagieren
In React werden Sie Listen mit einer Art Schleife rendern.
Die JavaScript map()-Array-Methode ist im Allgemeinen die bevorzugte Methode.
Wenn Sie eine Auffrischung der map()Methode benötigen, sehen Sie sich den
ES6-Abschnitt an .
Beispiel:
Lassen Sie uns alle Autos aus unserer Garage rendern:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Wenn Sie diesen Code in Ihrer ausführen create-react-app, funktioniert er, aber Sie erhalten eine Warnung, dass für die Listenelemente kein "Schlüssel" bereitgestellt wird.
Zertifiziert werden!
$ 95 REGISTRIEREN
Schlüssel
Schlüssel ermöglichen es React, den Überblick über Elemente zu behalten. Wenn ein Element aktualisiert oder entfernt wird, wird auf diese Weise nur dieses Element neu gerendert und nicht die gesamte Liste.
Schlüssel müssen für jedes Geschwister eindeutig sein. Aber sie können global dupliziert werden.
Im Allgemeinen sollte der Schlüssel eine eindeutige ID sein, die jedem Element zugewiesen ist. Als letzten Ausweg können Sie den Array-Index als Schlüssel verwenden.
Beispiel:
Lassen Sie uns unser vorheriges Beispiel so umgestalten, dass es Schlüssel enthält:
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));