Jednym z najprostszych sposobów oddzielenia danych od dokumentów HTML jest przechowywanie ich w formacie JSON. JSON jest popularny i łatwy w obsłudze, zwłaszcza w JavaScript.

W React sensowne jest serwowanie danych JSON za pośrednictwem tabel przy użyciu komponentu. Ten komponent będzie mógł wygenerować tabelę skalującą się z danymi JSON. Wynikowa tabela może mieć tyle wierszy, ile potrzebuje, ponieważ dane nie są zakodowane na stałe.

Czego będziesz potrzebować

Będziesz potrzebował Node.js zainstalowanego na swoim komputerze, aby skorzystać z tego samouczka i zrozumieć podstawowe zasady działania Reacta.

Przed utworzeniem tabeli będziesz musiał stworzyć nowy projekt React jeśli go nie masz.

Tworzenie danych JSON

W tabeli zostaną użyte dane zapisane w pliku JSON. Możesz pobrać te dane z punktu końcowego API w rzeczywistej aplikacji.

W folderze src utwórz nowy plik o nazwie data.json i dodaj następujące:

[{
"ID": 1,
"Imię": "Ethelred",
"nazwisko": "Powoli",
"e-mail": "[email protected]"
},{
"ID": 2,





instagram viewer



"Imię": "Reta",
"nazwisko": "Woolmer",
"e-mail": "[email protected]"
},{
"ID": 3,
"Imię": "Arabel",
"nazwisko": "Pestor",
"e-mail": "[email protected]"
}]

To jest prosty plik JSON zawierający trzy obiekty.

Klucze obiektów — identyfikator, imię, nazwisko i adres e-mail — to nagłówki, a odpowiadające im właściwości tworzą treść tabeli.

Tworzenie komponentu tabeli

Utwórz nowy plik o nazwie Table.js w folderze src i dodaj następujący kod.

eksportdomyślnafunkcjonowaćStół({theadData, tbodyData}) {
zwrócić (
<stół>
<thead>
<tr>
// wiersz nagłówka
</tr>
</thead>
<ciało>
// dane ciała
</tbody>
</table>
 );
}

Ten komponent przyjmuje theadData i tBodyData jako właściwości. theadData zawiera dane, które wyświetlisz w wierszu nagłówka. Aplikacja pobierze te dane z pliku JSON i przekaże je do komponentu Table.

Utwórz funkcję w App.js o nazwie getHeadings() i dodaj następujące.

stały pobierz nagłówki = () => {
zwrócićObiekt.klucze (dane[0]);
}

Ponieważ klucze dla każdego obiektu w pliku JSON są podobne, możesz po prostu użyć kluczy z pierwszego obiektu.

Pamiętaj o zaimportowaniu data.json w App.js.

import dane z „./dane.json”

Podczas renderowania komponentu Table przekaż nagłówek i dane JSON jako props.

<Tabela theadData={getHeadings()} tbodyData={data}/>

Tworzenie wiersza nagłówka

W tym kroku utworzysz komponent do renderowania elementu w wierszu nagłówka. Ten składnik będzie iterować po nagłówkach za pomocą metody map().

W Table.js dodaj kod do iteracji po nagłówkach wewnątrz tagu thead.

<tr>
 {theadData.map (nagłówek => {
 zwrócić <klucz = {nagłówek}>{nagłówek}</th>
 })}
</tr>

Następnie wypełnisz treść tabeli.

Tworzenie rzędów ciała

Treść tabeli renderuje dane wiersza. Ponieważ Table.js odbiera dane jako tablicę obiektów, musisz najpierw wykonać iterację, aby uzyskać każdy obiekt reprezentujący wiersz.

Tak więc w Table.js przeprowadź iterację po właściwości tBodyData w następujący sposób:

<ciało>
 {tbodyData.map((wiersz, indeks) => {
 zwrócić <klucz tr={indeks}>
// dane wiersza
</tr>;
 })}
</tbody>

Każdy obiekt wiersza będzie podobny do poniższego przykładu obiektu.

stały wiersz = {
"ID": 1,
"Imię": "Ethelred",
"nazwisko": "Powoli",
"e-mail": "[email protected]"
}

Aby wyświetlić każdy z tych elementów, musisz iterować po kluczach obiektu. W każdej iteracji pobierzesz właściwość, która pasuje do tego klucza w obiekcie wiersza. Ponieważ te klucze są takie same jak nagłówki, użyj wartości z właściwości theadData.

Zmodyfikuj znacznik tr, aby wyświetlić dane wiersza, jak pokazano poniżej.

<klucz tr={indeks}>
// theadData zawiera klucze
 {theadData.map((klucz, indeks) => {
 zwrócić <td klucz={wiersz[klucz]}>{wiersz[klucz]}</td>
 })}
</tr>;

Podsumowując wszystko, komponent Table powinien wyglądać tak:

eksportdomyślnafunkcjonowaćStół({theadData, tbodyData}) {
zwrócić (
<stół>
<thead>
<tr>
 {theadData.map (nagłówek => {
 zwrócić <klucz = {nagłówek}>{nagłówek}</th>
 })}
</tr>
</thead>
<ciało>
 {tbodyData.map((wiersz, indeks) => {
 zwrócić <klucz tr={indeks}>
 {theadData.map((klucz, indeks) => {
 zwrócić <td klucz={wiersz[klucz]}>{wiersz[klucz]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

w

element, składnik iteruje po tablicy danych i zwraca wiersz tabeli dla każdego obiektu.

Korzystanie z komponentu tabeli

Zaimportuj tabelę do App.js i wyrenderuj ją tak, jak pokazano poniżej:

import Stół z './Stół';
import dane z „./dane.json”
funkcjonowaćAplikacja() {
stały pobierz nagłówki = () => {
zwrócićObiekt.klucze (dane[0]);
 }
zwrócić (
<div className="pojemnik">
<Tabela theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
eksportdomyślna Aplikacja;

Komponent table przyjmuje theadData i tbodyData jako właściwości. theadData zawiera nagłówki wygenerowane z kluczy pierwszego elementu w danych JSON, a tbodyData zawiera cały plik JSON.

Stylizacja za pomocą modułów CSS

W tym samouczku wygenerowałeś składnik tabeli React z pliku JSON. Dowiedziałeś się również, jak manipulować danymi JSON, aby dopasować je do swoich potrzeb. Możesz poprawić wygląd swojej tabeli, dodając do niej kod CSS. Aby utworzyć style CSS o zasięgu lokalnym, rozważ użycie modułów CSS. Jest prosty w użyciu i łatwy do rozpoczęcia, jeśli używasz aplikacji create-react-app.