Dans cette section, nous allons utiliser un tableau pour expliquer la boucle native de portée dans le rendu. Pour cela, nous avons décrit un exemple de tableau de boucles de réaction dans le rendu. Lorsque nous souhaitons créer une application Web, il est très important d’avoir les connaissances nécessaires pour gérer un ensemble de données. Dans cet exemple, nous verrons l'utilisation de loop in réagir js . Dans notre exemple donné, nous allons utiliser la boucle for dans React js. Pour ce faire, nous devons suivre quelques étapes.
Dans cette section, nous utiliserons l'application React. Lorsque nous avons besoin d'une carte, d'une boucle foreach et d'une boucle for en réaction, nous pouvons consulter l'exemple suivant pour apprendre l'utilisation du tableau de boucles n réagir js. Dans un tableau, nous voulons toujours une boucle for et une boucle foreach. Lorsque nous voulons mettre notre tableau en boucle, il faudra une carte pour le faire. Nous allons donc vous expliquer l'exemple d'une map en React Native. Un nouveau tableau est créé par la méthode map(). Dans le tableau appelant, il fournit le résultat de l’appel d’une fonction sur chaque élément. Le processus de bouclage peut ainsi être simplifié. Lorsque nous utilisons la carte, nous n'avons pas besoin d'utiliser la fonction forEach ni la boucle for. Carte, boucle forEach, boucle for présente de nombreuses différences. Au lieu d'écraser les données existantes, la fonction map utilise les données et crée un nouveau tableau. En raison de toutes les fonctionnalités et de la simplicité de la fonction map, la documentation React nous encourage fortement à utiliser la fonction map.
Nous fournirons deux exemples dans l'application React pour expliquer ce concept simple. Dans le premier exemple, nous allons décrire la boucle de réaction, qui possède un tableau unidimensionnel. Dans le deuxième exemple, nous décrirons une boucle comportant un tableau multidimensionnel. Les deux exemples sont les suivants :
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; Après avoir exécuté cet exemple, nous obtiendrons l’aperçu suivant :
