V této části použijeme pole k vysvětlení nativní smyčky dosahu ve vykreslování. Za tímto účelem jsme popsali příklad pole reakční smyčky v renderu. Když chceme vytvořit jakoukoli webovou aplikaci, je velmi důležité mít znalosti o manipulaci s řadou dat. V tomto příkladu uvidíme použití smyčky v reagovat js . V našem uvedeném příkladu použijeme smyčku for v reakci js. Abychom to provedli, musíme provést několik kroků.
V této sekci použijeme aplikaci Reagovat. Když požadujeme mapu, smyčku foreach a smyčku for v reakci, můžeme se podívat na následující příklad, abychom se naučili používat pole smyček n reagovat js. V poli vždy chceme smyčku for a smyčku foreach. Když chceme zacyklit naše pole v dosahu, bude to vyžadovat mapu. Vysvětlíme tedy příklad mapy v nativním reagování. Nové pole se vytvoří metodou map(). V poli volání poskytuje výsledek volání funkce na každém prvku. Proces smyčkování lze tím zjednodušit. Když používáme mapu, nevyžadujeme použití funkce forEach a smyčky for. Mapa, forEach loop, for loop má mnoho rozdílů. Místo přepsání existujících dat použije funkce map data a vytvoří nové pole. Vzhledem ke všem funkcím a jednoduchosti mapové funkce nás React docs důrazně doporučuje používat mapovou funkci.
V aplikaci Reagovat poskytneme dva příklady, které tento snadný koncept vysvětlí. V prvním příkladu popíšeme reakční smyčku, která má jednorozměrné pole. Ve druhém příkladu popíšeme smyčku, která má vícerozměrné pole. Oba příklady jsou následující:
Pří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 spuštění tohoto příkladu získáme následující náhled:
