Tässä osiossa aiomme käyttää taulukkoa selittämään tavoittavuuden natiivisilmukkaa renderöinnissä. Tätä varten olemme kuvanneet react loop array esimerkkiä renderöinnissä. Kun haluamme rakentaa minkä tahansa verkkosovelluksen, on erittäin tärkeää hallita tietojoukon käsittelyä. Tässä esimerkissä näemme silmukan käytön reagoi js . Annetussa esimerkissämme aiomme käyttää for-silmukkaa react js:ssä. Tämän suorittamiseksi meidän on noudatettava joitain vaiheita.
Tässä osiossa käytämme react-sovellusta. Kun tarvitsemme karttaa, foreach-silmukkaa ja foreach-silmukkaa reactissa, voimme katsoa seuraavaa esimerkkiä oppiaksemme käyttämään loop array n react js:ää. Taulukossa haluamme aina foreach- ja foreach-silmukan. Kun haluamme silmukan taulukkoamme ulottuvillemme, se vaatii karttaa tehdäkseen tämän. Joten aiomme selittää esimerkin kartasta react natiivissa. Uusi taulukko luodaan map()-menetelmällä. Kutsuvassa taulukossa se tarjoaa tuloksen funktion kutsumisesta jokaisessa elementissä. Silmukkaprosessia voidaan yksinkertaistaa tällä. Kun käytämme karttaa, emme vaadi forEach-funktion ja for-silmukan käyttöä. Kartalla, forEach-silmukalla, for-silmukalla on monia eroja. Sen sijaan, että karttatoiminto korvaa olemassa olevan tiedon, se käyttää tietoja ja luo uuden taulukon. Kaikkien karttatoiminnon ominaisuuksien ja yksinkertaisuuden vuoksi React-dokumentit rohkaisevat meitä käyttämään karttatoimintoa.
Tarjoamme kaksi esimerkkiä react-sovelluksessa selittääksemme tämän helpon konseptin. Ensimmäisessä esimerkissä aiomme kuvata reagointisilmukkaa, jolla on yksiulotteinen matriisi. Toisessa esimerkissä kuvataan silmukkaa, jolla on moniulotteinen taulukko. Molemmat esimerkit ovat seuraavat:
Esimerkki 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; Tämän esimerkin suorittamisen jälkeen saamme seuraavan esikatselun:
