En af de mest ligetil måder at adskille data fra dine HTML-dokumenter på er at gemme dem i JSON. JSON er populær og nem at arbejde med, især i JavaScript.
I React giver det mening at betjene JSON-data via tabeller ved hjælp af en komponent. Denne komponent vil være i stand til at generere en tabel, der skaleres med JSON-dataene. Den resulterende tabel kan have så mange rækker, som den har brug for, da dataene ikke er hårdkodede.
Hvad du skal bruge
Du skal have Node.js installeret på din maskine for at følge denne vejledning og en grundlæggende forståelse af, hvordan React virker.
Før du opretter tabellen, skal du oprette et nyt React-projekt hvis du ikke har en.
Oprettelse af JSON-data
Tabellen vil bruge data gemt i en JSON-fil. Du kunne måske hente disse data fra et API-slutpunkt i en virkelig applikation.
I src-mappen skal du oprette en ny fil kaldet data.json og tilføje følgende:
[{
"id": 1,
"fornavn": "Ethelred",
"efternavn": "Langsomt",
"e-mail": "[email protected]"
},{
"id": 2,
"fornavn": "Reta
",
"efternavn": "Woolmer",
"e-mail": "[email protected]"
},{
"id": 3,
"fornavn": "Arabel",
"efternavn": "Pestor",
"e-mail": "[email protected]"
}]
Dette er en simpel JSON-fil, der indeholder tre objekter.
Objektnøglerne – id, fornavn, efternavn og e-mail – er overskrifterne, mens deres tilsvarende egenskaber udgør tabellens krop.
Oprettelse af tabelkomponenten
Opret en ny fil kaldet Table.js i src-mappen og tilføj følgende kode.
eksportStandardfungereBord({theadData, tbodyData}) {
Vend tilbage (
<bord>
<thead>
<tr>
// overskriftsrække
</tr>
</thead>
<kroppen>
// kropsdata
</tbody>
</table>
);
}
Denne komponent tager theadData og tBodyData som rekvisitter. theadData indeholder de data, du vil vise i overskriftsrækken. Appen henter disse data fra JSON-filen og videregiver dem til tabelkomponenten.
Opret en funktion i App.js kaldet getHeadings() og tilføj følgende.
konst getHeadings = () => {
Vend tilbageObjekt.keys (data[0]);
}Da nøglerne for hvert objekt i JSON-filen er ens, kan du blot bruge nøglerne fra det første objekt.
Husk at importere data.json i App.js.
importere data fra "./data.json"
Når du gengiver tabelkomponenten, skal du videregive overskriften og JSON-dataene som rekvisitter.
<Tabel theadData={getHeadings()} tbodyData={data}/>Oprettelse af overskriftsrækken
I dette trin vil du oprette en komponent til at gengive et element i overskriftsrækken. Denne komponent vil iterere over overskrifterne ved hjælp af map()-metoden.
I Table.js skal du tilføje koden for at gentage overskrifterne inde i thead-tagget.
<tr>
{theadData.map (overskrift => {
Vend tilbage <th key={heading}>{overskrift}</th>
})}
</tr>Dernæst vil du udfylde brødteksten i tabellen.
Oprettelse af kropsrækkerne
Tabellens krop gengiver rækkedataene. Da Table.js modtager dataene som et array af objekter, skal du først iterere over det for at få hvert objekt til at repræsentere en række.
Så, i Table.js, gentag over tBodyData prop som dette:
<kroppen>
{tbodyData.map((række, indeks) => {
Vend tilbage <tr nøgle={indeks}>
// rækkedata
</tr>;
})}
</tbody>
Hvert rækkeobjekt vil ligne objekteksemplet nedenfor.
konst række = {
"id": 1,
"fornavn": "Ethelred",
"efternavn": "Langsomt",
"e-mail": "[email protected]"
}
For at vise hver af disse elementer skal du gentage objektets nøgler. I hver iteration vil du hente den egenskab, der matcher den pågældende nøgle i rækkeobjektet. Da disse nøgler er de samme som overskrifterne, skal du bruge værdierne fra theadData prop.
Rediger tr-tagget for at vise rækkedata som vist nedenfor.
<tr nøgle={indeks}>
// theadData indeholder nøglerne
{theadData.map((nøgle, indeks) => {
Vend tilbage <td key={række[nøgle]}>{række[nøgle]}</td>
})}
</tr>;
Når alt samles, skulle tabelkomponenten se sådan ud:
eksportStandardfungereBord({theadData, tbodyData}) {
Vend tilbage (
<bord>
<thead>
<tr>
{theadData.map (overskrift => {
Vend tilbage <th key={heading}>{overskrift}</th>
})}
</tr>
</thead>
<kroppen>
{tbodyData.map((række, indeks) => {
Vend tilbage <tr nøgle={indeks}>
{theadData.map((nøgle, indeks) => {
Vend tilbage <td key={række[nøgle]}>{række[nøgle]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
I den
element, itererer komponenten over dataarrayet og returnerer tabelrækken for hvert objekt.Brug af tabelkomponenten
Importer tabel i App.js og gengiv den som vist nedenfor:
importere Bord fra './Bord';
importere data fra "./data.json"
fungereApp() {
konst getHeadings = () => {
Vend tilbageObjekt.keys (data[0]);
}
Vend tilbage (
<div klassenavn="beholder">
<Tabel theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
eksportStandard App;
Tabelkomponenten tager theadData og tbodyData som rekvisitter. theadData indeholder overskrifterne genereret fra nøglerne til det første element i JSON-dataene, og tbodyData indeholder hele JSON-filen.
Styling med CSS-moduler
Du genererede en React-tabelkomponent fra en JSON-fil i denne vejledning. Du lærte også, hvordan du kan manipulere JSON-data, så de passer til dine behov. Du kan forbedre udseendet af din tabel ved at tilføje noget CSS til den. Overvej at bruge CSS-moduler for at oprette CSS-stile med lokalt omfang. Den er enkel at bruge og nem at komme i gang med, hvis du bruger en opret-reager-app-applikation.
