Viens no vienkāršākajiem veidiem, kā atdalīt datus no HTML dokumentiem, ir saglabāt tos JSON. JSON ir populārs un ar to viegli strādāt, īpaši JavaScript.
Programmā React ir lietderīgi apkalpot JSON datus, izmantojot tabulas, izmantojot komponentu. Šis komponents varēs ģenerēt tabulu, kas tiek mērogota ar JSON datiem. Iegūtajā tabulā var būt tik daudz rindu, cik tai nepieciešams, jo dati nav kodēti.
Kas jums būs nepieciešams
Lai sekotu šai apmācībai un iegūtu pamatzināšanas par to, kā darbojas React, jūsu datorā būs jāinstalē Node.js.
Pirms tabulas izveidošanas jums tas būs jādara izveidot jaunu React projektu ja jums tāda nav.
JSON datu izveide
Tabulā tiks izmantoti JSON failā saglabātie dati. Tu varētu izgūt šos datus no API galapunkta reālās dzīves lietojumprogrammā.
Mapē src izveidojiet jaunu failu ar nosaukumu data.json un pievienojiet sekojošo:
[{
"id": 1,
"vārds": "Etelreds",
"uzvārds": "Lēnām",
"e-pasts": "[email protected]"
},{
"id": 2,
"vārds": "Reta",
"uzvārds": "Woolmer",
"e-pasts": "[email protected]
"
},{
"id": 3,
"vārds": "Arabels",
"uzvārds": "Pestors",
"e-pasts": "[email protected]"
}]
Šis ir vienkāršs JSON fails, kurā ir trīs objekti.
Objekta atslēgas — ID, vārds, uzvārds un e-pasts — ir virsraksti, savukārt to atbilstošās īpašības veido tabulas pamattekstu.
Tabulas komponenta izveide
Izveidojiet jaunu failu ar nosaukumu Tabula.js src mapē un pievienojiet šādu kodu.
eksportētnoklusējumafunkcijuTabula({theadData, tbodyData}) {
atgriezties (
<tabula>
<thead>
<tr>
// galvenes rinda
</tr>
</thead>
<tbody>
// ķermeņa dati
</tbody>
</table>
);
}
Šis komponents izmanto theadData un tBodyData kā rekvizītus. theadData satur datus, kas tiks parādīti galvenes rindā. Lietojumprogramma iegūs šos datus no JSON faila un nodos tos komponentam Tabula.
Izveidojiet funkciju iekšā App.js sauc getHeadings() un pievienojiet šo.
konst getHeadings = () => {
atgrieztiesObjekts.keys (data[0]);
}Tā kā katra JSON faila objekta atslēgas ir līdzīgas, varat vienkārši izmantot pirmā objekta atslēgas.
Atcerieties importēt data.json failu App.js.
imports datus no "./data.json"
Renderējot komponentu Tabula, nododiet virsrakstu un JSON datus kā rekvizītus.
<Tabula theadData={getHeadings()} tbodyData={data}/>Galvenes rindas izveide
Šajā darbībā jūs izveidosit komponentu, lai renderētu vienumu galvenes rindā. Šis komponents atkārtos virsrakstus, izmantojot karti () metodi.
Vietnē Table.js pievienojiet kodu, kas atkārtojas virs virsrakstiem reklāmas taga iekšpusē.
<tr>
{theadData.map (virsraksts => {
atgriezties <atslēga={virsraksts}>{heading}</th>
})}
</tr>Pēc tam aizpildīsit tabulas pamattekstu.
Ķermeņa rindu izveide
Tabulas pamatteksts atveido rindas datus. Tā kā Table.js saņem datus kā objektu masīvu, vispirms tie ir jāpārkārto, lai katrs objekts attēlotu rindu.
Tātad, Table.js atkārtojiet tBodyData prop šādi:
<tbody>
{tbodyData.map((rinda, indekss) => {
atgriezties <tr taustiņš={index}>
// rindas dati
</tr>;
})}
</tbody>
Katrs rindas objekts būs līdzīgs tālāk norādītajam objekta piemēram.
konst rinda = {
"id": 1,
"vārds": "Etelreds",
"uzvārds": "Lēnām",
"e-pasts": "[email protected]"
}
Lai parādītu katru no šiem vienumiem, jums būs jāatkārto pa objekta taustiņiem. Katrā iterācijā jūs izgūsit rekvizītu, kas atbilst šai rindas objekta atslēgai. Tā kā šīs atslēgas ir tādas pašas kā virsraksti, izmantojiet vērtības no theadData prop.
Modificējiet tr tagu, lai parādītu rindas datus, kā parādīts tālāk.
<tr taustiņš={index}>
// theadData satur atslēgas
{theadData.map((atslēga, indekss) => {
atgriezties <td taustiņš={rinda[atslēga]}>{rinda[atslēga]}</td>
})}
</tr>;
Saliekot visu kopā, tabulas komponentam vajadzētu izskatīties šādi:
eksportētnoklusējumafunkcijuTabula({theadData, tbodyData}) {
atgriezties (
<tabula>
<thead>
<tr>
{theadData.map (virsraksts => {
atgriezties <atslēga={virsraksts}>{heading}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map((rinda, indekss) => {
atgriezties <tr taustiņš={index}>
{theadData.map((atslēga, indekss) => {
atgriezties <td taustiņš={rinda[atslēga]}>{rinda[atslēga]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
Iekš
elements, komponents atkārtojas pa datu masīvu un atgriež tabulas rindu katram objektam.Izmantojot tabulas komponentu
Importējiet tabulu pakalpojumā App.js un atveidojiet to, kā parādīts tālāk:
imports Tabula no './Tabula';
imports datus no "./data.json"
funkcijuApp() {
konst getHeadings = () => {
atgrieztiesObjekts.keys (data[0]);
}
atgriezties (
<div klasesNosaukums="konteiners">
<Tabula theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
eksportētnoklusējuma Lietotne;
Tabulas komponents izmanto theadData un tbodyData kā rekvizītus. theadData satur virsrakstus, kas ģenerēti no JSON datu pirmā vienuma atslēgām, un tbodyData satur visu JSON failu.
Stils ar CSS moduļiem
Šajā apmācībā jūs ģenerējāt React tabulas komponentu no JSON faila. Jūs arī uzzinājāt, kā varat manipulēt ar JSON datiem, lai tie atbilstu savām vajadzībām. Varat uzlabot tabulas izskatu, pievienojot tai CSS. Lai izveidotu lokālus CSS stilus, apsveriet iespēju izmantot CSS moduļus. To ir vienkārši lietot, un to ir viegli sākt, ja izmantojat lietojumprogrammu izveidot un reaģēt.
