Jedním z nejpřímějších způsobů, jak oddělit data od dokumentů HTML, je uložit je do formátu JSON. JSON je oblíbený a snadno se s ním pracuje, zejména v JavaScriptu.

V Reactu má smysl obsluhovat data JSON prostřednictvím tabulek pomocí komponenty. Tato komponenta bude schopna generovat tabulku, která se přizpůsobí datům JSON. Výsledná tabulka může mít tolik řádků, kolik potřebuje, protože data nejsou pevně zakódována.

Co budete potřebovat

Abyste mohli sledovat tento tutoriál a základní pochopení toho, jak React funguje, budete potřebovat na vašem počítači nainstalovaný Node.js.

Před vytvořením tabulky budete muset vytvořit nový projekt React pokud žádný nemáte.

Vytváření dat JSON

Tabulka bude používat data uložená v souboru JSON. Můžeš načíst tato data z koncového bodu API v reálné aplikaci.

Ve složce src vytvořte nový soubor s názvem data.json a přidejte následující:

[{
"id": 1,
"jméno": "Ethelred",
"příjmení": "Pomalu",
"e-mailem": "[email protected]"
},{
"id": 2,
"jméno": "Reta",
"příjmení": "Woolmer
",
"e-mailem": "[email protected]"
},{
"id": 3,
"jméno": "Arabel",
"příjmení": "Pestor",
"e-mailem": "[email protected]"
}]

Jedná se o jednoduchý soubor JSON obsahující tři objekty.

Klíče objektu – id, jméno, příjmení a e-mail – jsou nadpisy, zatímco jejich odpovídající vlastnosti tvoří tělo tabulky.

Vytvoření komponenty tabulky

Vytvořte nový soubor s názvem Table.js ve složce src a přidejte následující kód.

vývoznívýchozífunkceStůl({theadData, tbodyData}) {
vrátit se (
<stůl>
<hlava>
<tr>
// řádek záhlaví
</tr>
</thead>
<tbody>
// data těla
</tbody>
</table>
 );
}

Tato komponenta bere theadData a tBodyData jako rekvizity. theadData obsahuje data, která zobrazíte v řádku záhlaví. Aplikace získá tato data ze souboru JSON a předá je komponentě Tabulka.

Vytvořte funkci v App.js s názvem getHeadings() a přidejte následující.

konst getHeadings = () => {
vrátit seObjekt.keys (data[0]);
}

Protože klíče pro každý objekt v souboru JSON jsou podobné, můžete jednoduše použít klíče z prvního objektu.

Nezapomeňte importovat data.json do App.js.

import data z "./data.json"

Při vykreslování komponenty Tabulka předejte záhlaví a data JSON jako rekvizity.

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

Vytvoření řádku záhlaví

V tomto kroku vytvoříte komponentu pro vykreslení položky v řádku záhlaví. Tato komponenta bude iterovat přes nadpisy pomocí metody map().

V Table.js přidejte kód pro iteraci přes nadpisy uvnitř značky thead.

<tr>
 {theadData.map (nadpis => {
 vrátit se <klíč={nadpis}>{nadpis}</th>
 })}
</tr>

Dále vyplníte tělo tabulky.

Vytváření řad těla

Tělo tabulky vykresluje data řádku. Protože soubor Table.js přijímá data jako pole objektů, budete je muset nejprve iterovat, abyste získali každý objekt představující řádek.

Takže v Table.js iterujte přes prop tBodyData takto:

<tbody>
 {tbodyData.map((řádek, index) => {
 vrátit se <tr key={index}>
// data řádku
</tr>;
 })}
</tbody>

Každý objekt řádku bude podobný příkladu objektu níže.

konst řádek = {
"id": 1,
"jméno": "Ethelred",
"příjmení": "Pomalu",
"e-mailem": "[email protected]"
}

Chcete-li zobrazit každou z těchto položek, budete muset iterovat přes klíče objektu. V každé iteraci získáte vlastnost, která odpovídá danému klíči v objektu řádku. Protože jsou tyto klíče stejné jako nadpisy, použijte hodnoty z podpěry theadData.

Upravte značku tr tak, aby zobrazovala data řádku, jak je uvedeno níže.

<tr key={index}>
// theadData obsahuje klíče
 {theadData.map((klíč, index) => {
 vrátit se <td key={row[key]}>{řádek[klíč]}</td>
 })}
</tr>;

Když vše shrneme, komponenta Tabulka by měla vypadat takto:

vývoznívýchozífunkceStůl({theadData, tbodyData}) {
vrátit se (
<stůl>
<hlava>
<tr>
 {theadData.map (nadpis => {
 vrátit se <klíč={nadpis}>{nadpis}</th>
 })}
</tr>
</thead>
<tbody>
 {tbodyData.map((řádek, index) => {
 vrátit se <tr key={index}>
 {theadData.map((klíč, index) => {
 vrátit se <td key={row[key]}>{řádek[klíč]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

V

prvek, komponenta iteruje datové pole a vrací řádek tabulky pro každý objekt.

Použití komponenty Tabulka

Importujte tabulku do App.js a vykreslete ji, jak je uvedeno níže:

import Stůl z './Stůl';
import data z "./data.json"
funkceAplikace() {
konst getHeadings = () => {
vrátit seObjekt.keys (data[0]);
 }
vrátit se (
<div název_třídy="kontejner">
<Tabulka theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
vývoznívýchozí Aplikace;

Komponenta tabulky bere theadData a tbodyData jako rekvizity. theadData obsahuje nadpisy vygenerované z klíčů první položky v datech JSON a tbodyData obsahuje celý soubor JSON.

Stylování pomocí modulů CSS

V tomto kurzu jste vygenerovali komponentu tabulky React ze souboru JSON. Také jste se dozvěděli, jak můžete manipulovat s daty JSON tak, aby vyhovovala vašim potřebám. Vzhled tabulky můžete vylepšit přidáním CSS. Chcete-li vytvořit styly CSS s místním rozsahem, zvažte použití modulů CSS. Používání je jednoduché a lze s ním snadno začít, pokud používáte aplikaci create-react-app.