V tejto časti použijeme pole na vysvetlenie natívnej slučky dosahu v renderi. Na tento účel sme opísali príklad poľa reakčnej slučky v renderi. Keď chceme vytvoriť akúkoľvek webovú aplikáciu, je veľmi dôležité mať znalosti o manipulácii s množstvom údajov. V tomto príklade uvidíme použitie slučky v reagovať js . V našom uvedenom príklade použijeme cyklus for v reakcii js. Aby sme to dosiahli, musíme vykonať niekoľko krokov.
V tejto časti použijeme aplikáciu Reagovať. Keď požadujeme mapu, slučku foreach a slučku for v reakcii, môžeme sa pozrieť na nasledujúci príklad, aby sme sa naučili používať pole slučiek n reagovat js. V poli vždy chceme slučku for a foreach. Keď chceme zacykliť naše pole v dosahu, bude to vyžadovať mapu. Vysvetlíme teda príklad mapy v natívnej reakcii. Nové pole sa vytvorí metódou map(). Vo volajúcom poli poskytuje výsledok volania funkcie na každom prvku. Proces slučkovania sa tým môže zjednodušiť. Keď používame mapu, nevyžadujeme použitie funkcie forEach a cyklu for. Mapa, pre každú slučku, pre slučku má veľa rozdielov. Namiesto prepísania existujúcich údajov funkcia mapy použije údaje a vytvorí nové pole. Vzhľadom na všetky funkcie a jednoduchosť funkcie mapy nám dokumenty React dôrazne odporúčajú používať funkciu mapy.
V aplikácii Reag poskytneme dva príklady na vysvetlenie tohto jednoduchého konceptu. V prvom príklade popíšeme reakčnú slučku, ktorá má jednorozmerné pole. V druhom príklade popíšeme slučku, ktorá má viacrozmerné pole. Oba príklady sú nasledovné:
Príklad 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; Po spustení tohto príkladu získame nasledujúci náhľad:
