En aquesta secció, utilitzarem una matriu per explicar el bucle natiu d'abast al render. Per a això, hem descrit un exemple de matriu de bucle de reacció al render. Quan volem construir qualsevol aplicació web, és molt important tenir el coneixement de manejar una sèrie de dades. En aquest exemple, veurem l'ús de loop in reaccionar js . En el nostre exemple donat, farem servir el bucle for a react js. Per fer-ho, hem de seguir alguns passos.
En aquesta secció, utilitzarem l'aplicació react. Quan necessitem un mapa, foreach bucle i for loop in react, podem mirar l'exemple següent per aprendre l'ús de la matriu de bucles n react js. En matriu, sempre volem bucle for i bucle foreach. Quan volem connectar la nostra matriu a l'abast, necessitarem un mapa per fer-ho. Així doncs, explicarem l'exemple d'un mapa en react native. El mètode map() crea una nova matriu. A la matriu de trucades, proporciona el resultat de cridar una funció en tots i cadascun dels elements. El procés de bucle es pot simplificar amb això. Quan fem servir el mapa, no necessitem l'ús de la funció forEach i el bucle for. Mapa, forEach bucle, for bucle té moltes diferències. En lloc de sobreescriure les dades existents, la funció de mapa utilitza les dades i crea una matriu nova. A causa de totes les característiques i la simplicitat de la funció de mapa, els documents de React ens animen fermament a utilitzar la funció de mapa.
Proporcionarem dos exemples a l'aplicació react per explicar aquest concepte fàcil. En el primer exemple, descriurem el bucle de reacció, que té una matriu unidimensional. En el segon exemple, descriurem un bucle que té una matriu multidimensional. Els dos exemples són els següents:
Exemple 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; Després d'executar aquest exemple, obtindrem la següent vista prèvia:
