Die for-Schleife in React

Enthält ein Array Produkte, Benutzer oder andere Datensätze, kann React für jeden Eintrag ein Element oder eine Komponente rendern. Für eine einfache Eins-zu-eins-Umwandlung eignet sich .map(); eine JavaScript-for-Schleife ist sinnvoll, wenn die einzelnen Schritte die Verarbeitung verständlicher machen. Beide Ansätze erzeugen ein Array mit Elementen, das React rendern kann.

Listen in React mit .map() rendern

Beginnen Sie mit den Datensätzen, die angezeigt werden sollen. Das folgende eigenständige JavaScript-Beispiel wandelt jedes Produkt in eine Textzeile um; es verwendet weder React noch mountet es eine Komponente. Die Ausgabe darunter entspricht ausschließlich der beobachteten Ausgabe dieses JavaScript-Beispiels.

const products = [
  { id: "mug", name: "Ceramic mug", price: 12 },
  { id: "notebook", name: "Notebook", price: 8 },
];

const labels = products.map((product) => `${product.name}: $${product.price}`);
console.log(labels.join("\n"));

Ceramic mug: $12
Notebook: $8

Für JSX können Sie dieselben Daten in Elemente umwandeln: products.map((product) => <li key={product.id}>{product.name}: ${product.price}</li>). Setzen Sie das zurückgegebene Array an die Stelle im Markup, an der die Liste erscheinen soll, zum Beispiel: <ul>{products.map((product) => <li key={product.id}>{product.name}</li>)}</ul>. React rendert das Array direkt. Fügen Sie einen Container also nur hinzu, wenn die Seitenstruktur ihn erfordert. Diese JSX-Beispiele veranschaulichen das Rendern mit React; sie werden durch den oben genannten JavaScript-Laufzeitnachweis nicht abgedeckt.

Sie können jeden Datensatz auch auf eine wiederverwendbare Komponente abbilden. Definieren Sie function ProductCard(props) { return <li>{props.name}: ${props.price}</li>; } und rendern Sie die Komponente anschließend so: products.map((product) => <ProductCard key={product.id} name={product.name} price={product.price} />). Die Komponente erhält name und price in ihrem props-Objekt und verwendet diese Werte für die Ausgabe. Alternativ können Sie den gesamten Datensatz mit product={product} übergeben und in der Komponente props.product.name sowie props.product.price auslesen. Wählen Sie eine Schnittstelle, aus der klar hervorgeht, welche Daten die Komponente benötigt.

Jedes Geschwisterelement in der Liste benötigt einen key, der innerhalb dieser Geschwister eindeutig ist und für denselben Datensatz stabil bleibt. Verwenden Sie dafür in der Regel eine ID aus den Daten. Ein Array-Index ist ungeeignet, wenn Elemente eingefügt, entfernt oder umsortiert werden können: Nach einer Änderung kann derselbe Index auf einen anderen Datensatz verweisen. Dadurch ordnet React den Komponentenstatus möglicherweise dem falschen Eintrag zu. React verwendet key, um Elemente bei Aktualisierungen einander zuzuordnen; der Wert wird nicht als Prop an die untergeordnete Komponente weitergegeben. Weitere Informationen zu Schlüsseln und Listen finden Sie in React-Leitfaden zum Rendern von Listen.

Eine JavaScript-for-Schleife verwenden

Eine JavaScript-for-Schleife ist praktisch, wenn Sie Elemente in expliziten Schritten zusammensetzen möchten. Initialisieren Sie in einer Komponente vor return ein Array, fügen Sie für jedes Produkt ein Element mit key hinzu und setzen Sie das Array anschließend in das zurückgegebene Markup ein. Das folgende vollständige Beispiel zeigt die Komponente Schritt für Schritt; es verwendet die oben deklarierte Variable products:

function ProductList() {
const items = [];
for (let i = 0; i < products.length; i += 1) {
const product = products[i];
items.push(<li key={product.id}>{product.name}: ${product.price}</li>);
}
return <ul>{items}</ul>;
}

Diese Komponente veranschaulicht React und JSX; sie ist nicht Teil des ausgeführten JavaScript-Beispiels. Die Schleife läuft, während die Komponente ihr Ergebnis vorbereitet. Eine Anweisung kann nicht direkt innerhalb von JSX stehen. Für eine einfache Eins-zu-eins-Umwandlung ist .map() meist kürzer und macht die Zuordnung zwischen Datensatz und Element leichter nachvollziehbar. Eine Schleife kann übersichtlicher sein, wenn das Ergebnis mehrere Anweisungen oder bedingte Schritte erfordert. Beide Muster sollten für die zurückgegebenen Elemente stabile Schlüssel verwenden.

Eine sofort aufgerufene Funktion verwenden

Ein sofort aufgerufener Funktionsausdruck (IIFE) kann Anweisungen innerhalb eines JSX-Ausdrucks ausführen, ist für das Rendern einer Liste aber eine unübliche Wahl. Der folgende JSX-Ausdruck erstellt beispielsweise unmittelbar ein Array und gibt es zurück: {(() => { const items = []; for (let i = 0; i < products.length; i += 1) { const product = products[i]; items.push(<li key={product.id}>{product.name}</li>); } return items; })()}. Dies veranschaulicht lediglich die Syntax und ist kein ausgeführtes React-Beispiel. Schreiben Sie den Rückgabewert in derselben Zeile wie return oder setzen Sie ihn in Klammern. Ein Zeilenumbruch direkt nach return kann durch die automatische Semikolon-Einfügung von JavaScript dazu führen, dass undefined zurückgegeben wird. Bei gewöhnlichen Listen sind .map() oder eine Schleife vor dem return der Komponente leichter zu lesen und zu warten.