Vienas iš paprasčiausių būdų atskirti duomenis nuo HTML dokumentų yra saugoti juos JSON. JSON yra populiarus ir su juo lengva dirbti, ypač „JavaScript“.

„React“ prasminga teikti JSON duomenis lentelėse naudojant komponentą. Šis komponentas galės sugeneruoti lentelę, kurios mastelis bus suderintas su JSON duomenimis. Gautoje lentelėje gali būti tiek eilučių, kiek jai reikia, nes duomenys nėra užkoduoti.

Ko Jums prireiks

Kad galėtumėte sekti šią mokymo programą ir suprasti, kaip veikia React, įrenginyje reikės įdiegti Node.js.

Prieš kurdami lentelę, turėsite sukurti naują React projektą jei jo neturite.

JSON duomenų kūrimas

Lentelėje bus naudojami JSON faile saugomi duomenys. Tu galėtum gauti šiuos duomenis iš API galutinio taško realiame gyvenime.

Aplanke src sukurkite naują failą pavadinimu data.json ir pridėkite:

[{
"id": 1,
"Pirmas vardas": "Ethelredas",
"pavardė": "Lėtai",
"paštu": "[email protected]"
},{
"id": 2,
"Pirmas vardas": "Reta",
"pavardė": "Woolmer",
"paštu": "[email protected]"
},{
"id": 3,
"Pirmas vardas": "Arabelis",
"pavardė": "Pestoras",
"paštu": "[email protected]"
}]
instagram viewer

Tai paprastas JSON failas, kuriame yra trys objektai.

Objekto raktai – ID, vardas, pavardė ir el. pašto adresas – yra antraštės, o atitinkamos jų savybės sudaro lentelės turinį.

Lentelės komponento kūrimas

Sukurkite naują failą pavadinimu Table.js src aplanke ir pridėkite šį kodą.

eksportuotinumatytasfunkcijaLentelė({theadData, tbodyData}) {
grąžinti (
<stalo>
<thead>
<tr>
// antraštės eilutė
</tr>
</thead>
<tkūnas>
// kūno duomenys
</tbody>
</table>
);
}

Šis komponentas naudoja theadData ir tBodyData kaip rekvizitus. theadData yra duomenys, kuriuos rodysite antraštės eilutėje. Programa paims šiuos duomenis iš JSON failo ir perduos juos lentelės komponentui.

Sukurkite funkciją App.js vadinamas getHeadings() ir pridėkite šiuos.

konst getHeadings = () => {
grąžintiObjektas.keys (data[0]);
}

Kadangi kiekvieno JSON failo objekto raktai yra panašūs, galite tiesiog naudoti pirmojo objekto raktus.

Nepamirškite importuoti data.json į App.js.

importuoti duomenis  "./data.json"

Kai pateikiate lentelės komponentą, perduokite antraštę ir JSON duomenis kaip rekvizitus.

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

Antraštės eilutės kūrimas

Šiame žingsnyje sukursite komponentą, skirtą elementui pateikti antraštės eilutėje. Šis komponentas kartos antraštes naudodamas žemėlapio () metodą.

Table.js pridėkite kodą, kad kartotumėte antraštes skelbimo žymos viduje.

<tr>
{theadData.map (antraštė => {
grąžinti <th key={antraštė}>{Antraštė}</th>
})}
</tr>

Tada užpildysite lentelės turinį.

Kūno eilučių kūrimas

Lentelės turinys pateikia eilutės duomenis. Kadangi Table.js gauna duomenis kaip objektų masyvą, pirmiausia turėsite juos pakartoti, kad kiekvienas objektas būtų eilute.

Taigi Table.js pakartokite „tBodyData“ pasiūlymą taip:

<tkūnas>
{tbodyData.map((eilutė, indeksas) => {
grąžinti <tr raktas={index}>
// eilutės duomenys
</tr>;
})}
</tbody>

Kiekvienas eilutės objektas bus panašus į toliau pateiktą objekto pavyzdį.

konst eilutė = {
"id": 1,
"Pirmas vardas": "Ethelredas",
"pavardė": "Lėtai",
"paštu": "[email protected]"
}

Norėdami parodyti kiekvieną iš šių elementų, turėsite kartoti objekto klavišus. Kiekvienoje iteracijoje gausite ypatybę, atitinkančią tą eilutės objekto raktą. Kadangi šie raktai yra tokie patys kaip antraštės, naudokite reikšmes iš theadData prop.

Modifikuokite tr žymą, kad būtų rodomi eilutės duomenys, kaip parodyta toliau.

<tr raktas={index}>
// theadData yra raktai
{theadData.map((raktas, indeksas) => {
grąžinti <td raktas={eilutė[raktas]}>{eilutė[raktas]}</td>
})}
</tr>;

Sujungus viską, lentelės komponentas turėtų atrodyti taip:

eksportuotinumatytasfunkcijaLentelė({theadData, tbodyData}) {
grąžinti (
<stalo>
<thead>
<tr>
{theadData.map (antraštė => {
grąžinti <th key={antraštė}>{Antraštė}</th>
})}
</tr>
</thead>
<tkūnas>
{tbodyData.map((eilutė, indeksas) => {
grąžinti <tr raktas={index}>
{theadData.map((raktas, indeksas) => {
grąžinti <td raktas={eilutė[raktas]}>{eilutė[raktas]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}

Viduje

elementas, komponentas kartojasi per duomenų masyvą ir pateikia kiekvieno objekto lentelės eilutę.

Lentelės komponento naudojimas

Importuokite lentelę į App.js ir atvaizduokite ją, kaip parodyta toliau:

importuoti Lentelė  „./Lentelė“;
importuoti duomenis "./data.json"
funkcijaProgramėlė() {
konst getHeadings = () => {
grąžintiObjektas.keys (data[0]);
}
grąžinti (
<div className="konteineris">
<Lentelė theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
eksportuotinumatytas Programėlė;

Lentelės komponentas naudoja theadData ir tbodyData kaip rekvizitus. „theadData“ yra antraštės, sugeneruotos iš pirmojo JSON duomenų elemento raktų, o „tbodyData“ yra visas JSON failas.

Stilius naudojant CSS modulius

Šioje mokymo programoje sugeneravote „React“ lentelės komponentą iš JSON failo. Taip pat sužinojote, kaip galite manipuliuoti JSON duomenimis, kad atitiktų jūsų poreikius. Galite pagerinti lentelės išvaizdą, pridėdami prie jos šiek tiek CSS. Norėdami sukurti vietinės apimties CSS stilius, apsvarstykite galimybę naudoti CSS modulius. Tai paprasta naudoti ir lengva pradėti, jei naudojate programą kurti-reaguoti.