Una dintre cele mai simple moduri de a separa datele din documentele HTML este să le stocați în JSON. JSON este popular și ușor de utilizat, în special în JavaScript.
În React, este logic să serviți date JSON prin tabele folosind o componentă. Acea componentă va putea genera un tabel care se scalează cu datele JSON. Tabelul rezultat poate avea câte rânduri are nevoie, deoarece datele nu sunt codificate.
Ce vei avea nevoie
Veți avea nevoie de Node.js instalat pe computer pentru a urma acest tutorial și o înțelegere de bază a modului în care funcționează React.
Înainte de a crea tabelul, va trebui creați un nou proiect React daca nu ai unul.
Crearea datelor JSON
Tabelul va folosi datele stocate într-un fișier JSON. Tu ai putea preluați aceste date de la un punct final API într-o aplicație din viața reală.
În folderul src, creați un fișier nou numit data.json și adăugați următoarele:
[{
"id": 1,
"Nume": "Ethelred",
"numele de familie": "Încet",
"e-mail": "[email protected]"
},{
"id": 2,
"Nume": "Reta",
"numele de familie": "Woolmer",
"e-mail": "[email protected]"
},{
"id": 3,
"Nume": "Arabel",
"numele de familie": "Pestor",
"e-mail": "[email protected]"
}]
Acesta este un fișier JSON simplu care conține trei obiecte.
Cheile obiectului - id-ul, prenumele, numele și e-mailul - sunt titlurile, în timp ce proprietățile lor corespunzătoare formează corpul tabelului.
Crearea componentei de tabel
Creați un fișier nou numit Table.js în folderul src și adăugați următorul cod.
exportMod implicitfuncţieMasa({theadData, tbodyData}) {
întoarcere (
<masa>
<thead>
<tr>
// rând de antet
</tr>
</thead>
<tbody>
// date corporale
</tbody>
</table>
);
}
Această componentă ia theadData și tBodyData ca elemente de recuzită. theadData conține datele pe care le veți afișa în rândul antetului. Aplicația va sursa aceste date din fișierul JSON și le va preda componentei Tabel.
Creați o funcție în App.js numit getHeadings() și adăugați următoarele.
const getHeadings = () => {
întoarcereObiect.keys (date[0]);
}Deoarece cheile pentru fiecare obiect din fișierul JSON sunt similare, puteți utiliza pur și simplu cheile de la primul obiect.
Nu uitați să importați data.json în App.js.
import date din „./data.json”
Când randați componenta Tabel, transmiteți antetul și datele JSON ca elemente de recuzită.
<Tabel theadData={getHeadings()} tbodyData={date}/>Crearea rândului de antet
În acest pas, veți crea o componentă pentru a reda un element în rândul antetului. Această componentă va itera peste titluri folosind metoda map().
În Table.js, adăugați codul pentru a repeta peste titlurile din interiorul etichetei thead.
<tr>
{theadData.map (titlu => {
întoarcere <cheie={titlu}>{titlu}</th>
})}
</tr>În continuare, vei completa corpul tabelului.
Crearea rândurilor corpului
Corpul tabelului redă datele rândului. Deoarece Table.js primește datele ca o matrice de obiecte, va trebui să repetați mai întâi peste ele pentru a obține fiecare obiect reprezentând un rând.
Deci, în Table.js, repetați prop tBodyData astfel:
<tbody>
{tbodyData.map((rând, index) => {
întoarcere <cheie tr={index}>
// date pe rând
</tr>;
})}
</tbody>
Fiecare obiect rând va fi similar cu exemplul de obiect de mai jos.
const rând = {
"id": 1,
"Nume": "Ethelred",
"numele de familie": "Încet",
"e-mail": "[email protected]"
}
Pentru a afișa fiecare dintre aceste elemente, va trebui să iterați cheile obiectului. În fiecare iterație, veți prelua proprietatea care se potrivește cu acea cheie din obiectul rând. Deoarece aceste chei sunt aceleași cu titlurile, utilizați valorile din prop theadData.
Modificați eticheta tr pentru a afișa datele rândului, așa cum se arată mai jos.
<cheie tr={index}>
// theadData conține cheile
{theadData.map((cheie, index) => {
întoarcere <td key={rând[cheie]}>{rând[cheie]}</td>
})}
</tr>;
Adunând totul împreună, componenta Tabel ar trebui să arate astfel:
exportMod implicitfuncţieMasa({theadData, tbodyData}) {
întoarcere (
<masa>
<thead>
<tr>
{theadData.map (titlu => {
întoarcere <cheie={titlu}>{titlu}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map((rând, index) => {
întoarcere <cheie tr={index}>
{theadData.map((cheie, index) => {
întoarcere <td key={rând[cheie]}>{rând[cheie]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
În
element, componenta iterează peste matricea de date și returnează rândul tabelului pentru fiecare obiect.Folosind Componenta Tabel
Importați tabelul în App.js și redați-l așa cum se arată mai jos:
import Masa din './Masa';
import date din „./data.json”
funcţieApp() {
const getHeadings = () => {
întoarcereObiect.keys (date[0]);
}
întoarcere (
<div className="recipient">
<Tabel theadData={getHeadings()} tbodyData={date}/>
</div>
);
}
exportMod implicit Aplicație;
Componenta de tabel ia theadData și tbodyData ca elemente de recuzită. theadData conține titlurile generate din cheile primului element din datele JSON, iar tbodyData conține întregul fișier JSON.
Stilizare cu module CSS
Ați generat o componentă de tabel React dintr-un fișier JSON în acest tutorial. De asemenea, ați învățat cum puteți manipula datele JSON pentru a se potrivi nevoilor dvs. Puteți îmbunătăți aspectul tabelului dvs. adăugând niște CSS la acesta. Pentru a crea stiluri CSS la nivel local, luați în considerare utilizarea modulelor CSS. Este simplu de utilizat și ușor de început dacă utilizați o aplicație create-react-app.
