În această secțiune, vom folosi o matrice pentru a explica bucla nativă de atingere în randare. Pentru aceasta, am descris un exemplu de matrice de buclă de reacție în randare. Când dorim să construim orice aplicație web, este foarte important să avem cunoștințele de a manipula o serie de date. În acest exemplu, vom vedea utilizarea buclei în reacționează js . În exemplul nostru, vom folosi bucla for în react js. Pentru a realiza acest lucru, trebuie să urmam câțiva pași.
În această secțiune, vom folosi aplicația react. Când avem nevoie de o hartă, foreach loop și for loop in react, ne putem uita la următorul exemplu pentru a afla cum se utilizează matricea buclei n react js. În matrice, vrem întotdeauna bucla for și bucla foreach. Când dorim să ne întindem matricea în buclă, va fi nevoie de o hartă pentru a face acest lucru. Deci vom explica exemplul unei hărți în react nativ. O nouă matrice este creată prin metoda map(). În tabloul de apelare, acesta oferă rezultatul apelării unei funcții pe fiecare element. Procesul de buclă poate fi simplificat prin aceasta. Când folosim harta, nu avem nevoie de utilizarea funcției forEach și a buclei for. Harta, forFiecare buclă, bucla for are multe diferențe. În loc să suprascrie datele existente, funcția de hartă folosește datele și creează o nouă matrice. Datorită tuturor caracteristicilor și simplității funcției de hartă, documentele React ne încurajează cu tărie să folosim funcția de hartă.
Vom oferi două exemple în aplicația react pentru a explica acest concept ușor. În primul exemplu, vom descrie bucla de reacție, care are o matrice unidimensională. În al doilea exemplu, vom descrie o buclă care are o matrice multidimensională. Ambele exemple sunt după cum urmează:
Exemplul 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; După rularea acestui exemplu, vom obține următoarea previzualizare:
