Jedným z najjednoduchších spôsobov, ako oddeliť údaje od dokumentov HTML, je uložiť ich do formátu JSON. JSON je obľúbený a ľahko sa s ním pracuje, najmä v JavaScripte.

V Reacte má zmysel poskytovať údaje JSON prostredníctvom tabuliek pomocou komponentu. Tento komponent bude schopný generovať tabuľku, ktorá sa škáluje s údajmi JSON. Výsledná tabuľka môže mať toľko riadkov, koľko potrebuje, pretože údaje nie sú pevne zakódované.

Čo budete potrebovať

Budete potrebovať Node.js nainštalovaný na vašom počítači, aby ste mohli sledovať tento tutoriál a základné pochopenie toho, ako React funguje.

Pred vytvorením tabuľky budete musieť vytvoriť nový projekt React ak ho nemáte.

Vytváranie údajov JSON

Tabuľka bude používať údaje uložené v súbore JSON. Mal by si získať tieto údaje z koncového bodu API v reálnej aplikácii.

V priečinku src vytvorte nový súbor s názvom data.json a pridajte nasledujúce:

[{
"id": 1,
"krstné meno": "Ethelred",
"priezvisko": "pomaly",
"email": "[email protected]"
},{
"id": 2,
"krstné meno





instagram viewer


": "Reta",
"priezvisko": "Woolmer",
"email": "[email protected]"
},{
"id": 3,
"krstné meno": "Arabel",
"priezvisko": "Pestor",
"email": "[email protected]"
}]

Toto je jednoduchý súbor JSON obsahujúci tri objekty.

Kľúče objektu – id, meno, priezvisko a e-mail – sú nadpisy, zatiaľ čo ich zodpovedajúce vlastnosti tvoria telo tabuľky.

Vytvorenie komponentu tabuľky

Vytvorte nový súbor s názvom Table.js v priečinku src a pridajte nasledujúci kód.

exportpredvolenáfunkciuTabuľka({theadData, tbodyData}) {
vrátiť (
<tabuľky>
<hlava>
<tr>
// riadok hlavičky
</tr>
</thead>
<tbody>
// údaje o tele
</tbody>
</table>
 );
}

Tento komponent berie ako rekvizity theadData a tBodyData. theadData obsahuje údaje, ktoré zobrazíte v riadku hlavičky. Aplikácia získa tieto údaje zo súboru JSON a odovzdá ich komponentu Tabuľka.

Vytvorte funkciu v App.js s názvom getHeadings() a pridajte nasledujúce.

konšt getHeadings = () => {
vrátiťObjekt.keys (údaje[0]);
}

Keďže kľúče pre každý objekt v súbore JSON sú podobné, môžete jednoducho použiť kľúče z prvého objektu.

Nezabudnite importovať data.json do App.js.

importovať údajov od "./data.json"

Pri vykresľovaní komponentu Tabuľka odovzdajte nadpis a údaje JSON ako rekvizity.

<Tabuľka theadData={getHeadings()} tbodyData={data}/>

Vytvorenie riadku hlavičky

V tomto kroku vytvoríte komponent na vykreslenie položky v riadku hlavičky. Tento komponent bude iterovať cez nadpisy pomocou metódy map().

Do súboru Table.js pridajte kód na iteráciu nad nadpismi v značke reklamy.

<tr>
 {theadData.map (nadpis => {
 vrátiť <th key={heading}>{nadpis}</th>
 })}
</tr>

Ďalej vyplníte telo tabuľky.

Vytváranie radov tela

Telo tabuľky vykresľuje údaje riadka. Keďže súbor Table.js prijíma údaje ako pole objektov, budete ho musieť najprv iterovať, aby ste získali každý objekt predstavujúci riadok.

Takže v Table.js iterujte cez podperu tBodyData takto:

<tbody>
 {tbodyData.map((riadok, index) => {
 vrátiť <tr key={index}>
// údaje o riadku
</tr>;
 })}
</tbody>

Každý riadkový objekt bude podobný príkladu objektu nižšie.

konšt riadok = {
"id": 1,
"krstné meno": "Ethelred",
"priezvisko": "pomaly",
"email": "[email protected]"
}

Ak chcete zobraziť každú z týchto položiek, budete musieť iterovať klávesy objektu. V každej iterácii získate vlastnosť, ktorá sa zhoduje s kľúčom v objekte riadka. Keďže tieto kľúče sú rovnaké ako nadpisy, použite hodnoty z podpery theadData.

Upravte značku tr, aby sa zobrazili údaje riadka, ako je uvedené nižšie.

<tr key={index}>
// theadData obsahuje kľúče
 {theadData.map((kľúč, index) => {
 vrátiť <td key={row[key]}>{row[key]}</td>
 })}
</tr>;

Keď všetko spojíme, komponent Tabuľka by mal vyzerať takto:

exportpredvolenáfunkciuTabuľka({theadData, tbodyData}) {
vrátiť (
<tabuľky>
<hlava>
<tr>
 {theadData.map (nadpis => {
 vrátiť <th key={heading}>{nadpis}</th>
 })}
</tr>
</thead>
<tbody>
 {tbodyData.map((riadok, index) => {
 vrátiť <tr key={index}>
 {theadData.map((kľúč, index) => {
 vrátiť <td key={row[key]}>{row[key]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

V

prvok, komponent iteruje dátové pole a vráti riadok tabuľky pre každý objekt.

Používanie komponentu tabuľky

Importujte tabuľku do App.js a vykreslite ju, ako je uvedené nižšie:

importovať Tabuľka od './Tabuľka';
importovať údajov od "./data.json"
funkciuApp() {
konšt getHeadings = () => {
vrátiťObjekt.keys (údaje[0]);
 }
vrátiť (
<div názov triedy="kontajner">
<Tabuľka theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
exportpredvolená App;

Tabuľkový komponent berie theadData a tbodyData ako rekvizity. theadData obsahuje nadpisy vygenerované z kľúčov prvej položky v údajoch JSON a tbodyData obsahuje celý súbor JSON.

Styling s modulmi CSS

V tomto návode ste vygenerovali komponent tabuľky React zo súboru JSON. Tiež ste sa naučili, ako môžete manipulovať s údajmi JSON tak, aby vyhovovali vašim potrebám. Vzhľad tabuľky môžete vylepšiť pridaním nejakého CSS. Ak chcete vytvoriť štýly CSS s lokálnym rozsahom, zvážte použitie modulov CSS. Je jednoduchý na používanie a ľahko sa s ním začína, ak používate aplikáciu create-react-app.