Ebben a részben egy tömb segítségével magyarázzuk el a natív elérési hurkot a renderelésben. Ehhez leírtunk egy react loop tömb példát a renderelésben. Ha bármilyen webes alkalmazást szeretnénk készíteni, nagyon fontos, hogy rendelkezzünk egy adattömb kezelésének ismerete. Ebben a példában a loop in használatát fogjuk látni reagál js . Adott példánkban a for ciklust fogjuk használni a react js-ben. Ennek végrehajtásához néhány lépést kell követnünk.
Ebben a részben a react alkalmazást fogjuk használni. Ha térképre, foreach ciklusra és for loop in reactre van szükségünk, a következő példában megtudhatjuk a loop array n react js használatát. A tömbben mindig a ciklust és a foreach ciklust akarjuk. Ha el akarjuk hurkolni a tömbünket, akkor ehhez térképre lesz szükség. Tehát elmagyarázzuk a react natív térkép példáját. Egy új tömb jön létre a map() metódussal. A hívó tömbben minden egyes elemen egy függvény meghívásának eredményét adja. A hurkolási folyamat ezzel leegyszerűsíthető. Amikor a térképet használjuk, nem szükséges a forEach függvény és a for ciklus használata. Map, forEach ciklus, for ciklus sok különbséggel rendelkezik. A meglévő adatok felülírása helyett a térkép funkció az adatokat használja és új tömböt hoz létre. A térkép funkció minden funkciója és egyszerűsége miatt a React docs határozottan javasolja a térkép funkció használatát.
Két példát mutatunk be a React alkalmazásban, hogy elmagyarázzuk ezt az egyszerű koncepciót. Az első példában a reakcióhurkot fogjuk leírni, amelynek egydimenziós tömbje van. A második példában egy többdimenziós tömböt tartalmazó hurkot írunk le. Mindkét példa a következő:
1. példa:
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; A példa futtatása után a következő előnézetet kapjuk:
