W tej sekcji użyjemy tablicy, aby wyjaśnić natywną pętlę zasięgu w renderowaniu. W tym celu opisaliśmy w renderowaniu przykładową tablicę pętli reakcji. Kiedy chcemy zbudować dowolną aplikację internetową, bardzo ważna jest wiedza dotycząca obsługi tablicy danych. W tym przykładzie zobaczymy użycie pętli zareagować j . W naszym przykładzie użyjemy pętli for w reakcji js. Aby to wykonać, musimy wykonać kilka kroków.
W tej sekcji będziemy używać aplikacji reagującej. Kiedy potrzebujemy mapy, pętli foreach i pętli for w reakcji, możemy przyjrzeć się poniższemu przykładowi, aby dowiedzieć się, jak używać tablicy pętli n reagują js. W tablicy zawsze chcemy pętli for i foreach. Kiedy chcemy zapętlić naszą tablicę w zasięgu, będzie to wymagać mapy. Wyjaśnimy więc przykład mapy w wersji natywnej reagującej. Nowa tablica jest tworzona metodą map(). W tablicy wywołującej udostępnia wynik wywołania funkcji na każdym elemencie. Można w ten sposób uprościć proces tworzenia pętli. Kiedy korzystamy z mapy, nie wymagamy użycia funkcji forEach i pętli for. Mapa, pętla forEach i pętla for mają wiele różnic. Zamiast nadpisywać istniejące dane, funkcja map wykorzystuje te dane i tworzy nową tablicę. Ze względu na wszystkie funkcje i prostotę funkcji mapy, dokumentacja React gorąco zachęca nas do korzystania z funkcji mapy.
W aplikacji reagującej przedstawimy dwa przykłady wyjaśniające tę prostą koncepcję. W pierwszym przykładzie opiszemy pętlę reakcji, która ma tablicę jednowymiarową. W drugim przykładzie opiszemy pętlę posiadającą tablicę wielowymiarową. Oba przykłady są następujące:
Przykład 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 uruchomieniu tego przykładu otrzymamy następujący podgląd:
