In deze sectie gaan we een array gebruiken om de native reiklus in de render uit te leggen. Hiervoor hebben we een voorbeeld van een react-loop-array in de render beschreven. Wanneer we een webapplicatie willen bouwen, is het erg belangrijk om kennis te hebben van het omgaan met een reeks gegevens. In dit voorbeeld zullen we het gebruik van loop in zien reageer js . In ons gegeven voorbeeld gaan we for loop gebruiken in react js. Om dit uit te voeren, moeten we een aantal stappen volgen.
In deze sectie gebruiken we de react-app. Wanneer we een kaart, foreach-lus en for-lus in react nodig hebben, kunnen we naar het volgende voorbeeld kijken om het gebruik van loop array n react js te leren. In array willen we altijd for loop en foreach loop. Als we onze array binnen bereik willen herhalen, is hiervoor een kaart nodig. We gaan dus het voorbeeld van een kaart in react native uitleggen. Er wordt een nieuwe array gemaakt met de methode map(). In de aanroepende array geeft het het resultaat van het aanroepen van een functie voor elk element. Hierdoor kan het lusproces worden vereenvoudigd. Wanneer we de kaart gebruiken, hebben we niet het gebruik van de functie forEach en for loop nodig. Kaart, voorElke lus, for-lus heeft veel verschillen. In plaats van de bestaande gegevens te overschrijven, gebruikt de kaartfunctie de gegevens en wordt een nieuwe array gemaakt. Vanwege alle functies en de eenvoud van de kaartfunctie moedigen React-documenten ons sterk aan om de kaartfunctie te gebruiken.
We zullen twee voorbeelden geven in de react-app om dit eenvoudige concept uit te leggen. In het eerste voorbeeld gaan we de reactielus beschrijven, die een eendimensionale array heeft. In het tweede voorbeeld beschrijven we een lus met een multidimensionale array. Beide voorbeelden zijn als volgt:
Voorbeeld 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; Nadat we dit voorbeeld hebben uitgevoerd, krijgen we het volgende voorbeeld:
