En esta sección, usaremos una matriz para explicar el bucle nativo de alcance en el renderizado. Para esto, hemos descrito un ejemplo de matriz de bucle de reacción en el renderizado. Cuando queremos construir cualquier aplicación web, es muy importante tener el conocimiento para manejar una variedad de datos. En este ejemplo, veremos el uso de bucle en reaccionar js . En nuestro ejemplo dado, usaremos el bucle for en reaccionar js. Para realizar esto, tenemos que seguir algunos pasos.
En esta sección, usaremos la aplicación React. Cuando necesitamos un mapa, un bucle foreach y un bucle for en reaccionar, podemos mirar el siguiente ejemplo para aprender el uso de la matriz de bucle n reaccionar js. En una matriz, siempre queremos bucles for y foreach. Cuando queramos hacer un bucle en nuestra matriz al alcance, será necesario un mapa para hacerlo. Entonces vamos a explicar el ejemplo de un mapa en reaccionar nativo. Se crea una nueva matriz mediante el método map(). En la matriz de llamada, proporciona el resultado de llamar a una función en todos y cada uno de los elementos. Esto puede simplificar el proceso de bucle. Cuando usamos el mapa, no requerimos el uso de la función forEach ni del bucle for. Mapa, bucle forEach y bucle for tienen muchas diferencias. En lugar de sobrescribir los datos existentes, la función de mapa utiliza los datos y crea una nueva matriz. Debido a todas las características y la simplicidad de la función de mapa, los documentos de React nos recomiendan encarecidamente que utilicemos la función de mapa.
Proporcionaremos dos ejemplos en la aplicación React para explicar este sencillo concepto. En el primer ejemplo, describiremos el bucle de reacción, que tiene una matriz unidimensional. En el segundo ejemplo, describiremos un bucle que tiene una matriz multidimensional. Ambos ejemplos son los siguientes:
Ejemplo 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; Después de ejecutar este ejemplo, obtendremos la siguiente vista previa:
