Nesta seção, usaremos um array para explicar o loop nativo de alcance na renderização. Para isso, descrevemos um exemplo de array de loop de reação na renderização. Quando queremos construir qualquer aplicação web, é muito importante ter conhecimento de como lidar com uma matriz de dados. Neste exemplo, veremos o uso de loop em reagir js . Em nosso exemplo, usaremos o loop for no react js. Para fazer isso, temos que seguir alguns passos.
Nesta seção, usaremos o aplicativo react. Quando precisamos de um mapa, loop foreach e loop for no react, podemos olhar o exemplo a seguir para aprender o uso do loop array n react js. No array, sempre queremos loop for e loop foreach. Quando quisermos fazer um loop em nosso array ao alcance, será necessário um mapa para fazer isso. Então vamos explicar o exemplo de um mapa em react nativo. Um novo array é criado pelo método map(). No array de chamada, ele fornece o resultado da chamada de uma função em cada elemento. O processo de loop pode ser simplificado por isso. Quando usamos o mapa, não exigimos o uso da função forEach e do loop for. Mapa, loop forEach, loop for tem muitas diferenças. Em vez de substituir os dados existentes, a função map usa os dados e cria um novo array. Devido a todos os recursos e à simplicidade da função map, os documentos do React nos incentivam fortemente a usar a função map.
Forneceremos dois exemplos no aplicativo react para explicar esse conceito fácil. No primeiro exemplo, vamos descrever o loop de reação, que possui um array unidimensional. No segundo exemplo, descreveremos um loop que possui um array multidimensional. Ambos os exemplos são os seguintes:
Exemplo 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; Depois de executar este exemplo, obteremos a seguinte visualização:
