In diesem Abschnitt verwenden wir ein Array, um die Reach-Native-Schleife im Rendering zu erläutern. Zu diesem Zweck haben wir im Render ein Beispiel für ein React-Loop-Array beschrieben. Wenn wir eine Webanwendung erstellen möchten, ist es sehr wichtig, über Kenntnisse im Umgang mit einer Reihe von Daten zu verfügen. In diesem Beispiel sehen wir die Verwendung von Loop-In reagiere js . In unserem gegebenen Beispiel werden wir die for-Schleife in „react js“ verwenden. Um dies durchzuführen, müssen wir einige Schritte befolgen.
In diesem Abschnitt verwenden wir die React-App. Wenn wir in React eine Map, eine Foreach-Schleife und eine For-Schleife benötigen, können wir uns das folgende Beispiel ansehen, um die Verwendung des Loop-Arrays n React JS zu lernen. Im Array benötigen wir immer eine for-Schleife und eine foreach-Schleife. Wenn wir unser Array in Reichweite schleifen möchten, benötigen wir dazu eine Karte. Daher werden wir das Beispiel einer Karte in React Native erläutern. Ein neues Array wird durch die Methode map() erstellt. Im aufrufenden Array wird das Ergebnis des Funktionsaufrufs für jedes einzelne Element bereitgestellt. Der Schleifenvorgang kann dadurch vereinfacht werden. Wenn wir die Karte verwenden, ist die Verwendung der forEach-Funktion und der for-Schleife nicht erforderlich. Karte, forJede Schleife, for-Schleife weist viele Unterschiede auf. Anstatt die vorhandenen Daten zu überschreiben, verwendet die Kartenfunktion die Daten und erstellt ein neues Array. Aufgrund aller Funktionen und der Einfachheit der Kartenfunktion empfehlen uns die React-Dokumente dringend, die Kartenfunktion zu verwenden.
Wir werden in der React-App zwei Beispiele bereitstellen, um dieses einfache Konzept zu erläutern. Im ersten Beispiel beschreiben wir die Reaktionsschleife, die über ein eindimensionales Array verfügt. Im zweiten Beispiel beschreiben wir eine Schleife mit einem mehrdimensionalen Array. Beide Beispiele lauten wie folgt:
Beispiel 1:
rc/App.js
import React from 'react'; function App() { const myArray = ['Jack', 'Mary', 'John', 'Krish', 'Navin']; return ( <table class="table"> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> {students.map((student, index) => ( <tr> <td>{student.id}</td> <td>{student.name}</td> <td>{student.email}</td> </tr> ))} </table> ); } export default App; Nachdem wir dieses Beispiel ausgeführt haben, erhalten wir die folgende Vorschau:
