Ett av de enklaste sätten att separera data från dina HTML-dokument är att lagra dem i JSON. JSON är populärt och lätt att arbeta med, särskilt i JavaScript.
I React är det vettigt att servera JSON-data via tabeller med hjälp av en komponent. Den komponenten kommer att kunna generera en tabell som skalas med JSON-data. Den resulterande tabellen kan ha så många rader som den behöver eftersom data inte är hårdkodade.
Vad du kommer att behöva
Du behöver Node.js installerat på din maskin för att följa denna handledning och en grundläggande förståelse för hur React fungerar.
Innan du skapar tabellen måste du göra det skapa ett nytt React-projekt om du inte har en.
Skapar JSON-data
Tabellen kommer att använda data som lagras i en JSON-fil. Du kanske hämta dessa data från en API-slutpunkt i en verklig applikation.
Skapa en ny fil som heter i src-mappen data.json och lägg till följande:
[{
"id": 1,
"förnamn": "Ethelred",
"efternamn": "Långsamt",
"e-post": "[email protected]"
},{
"id": 2,
"förnamn": "Reta",
"efternamn": "Woolmer",
"e-post": "[email protected]"
},{
"id": 3,
"förnamn": "Arabel",
"efternamn": "Pestor",
"e-post": "[email protected]"
}]
Detta är en enkel JSON-fil som innehåller tre objekt.
Objektnycklarna – id, förnamn, efternamn och e-post – är rubrikerna, medan deras motsvarande egenskaper utgör tabellens kropp.
Skapa tabellkomponenten
Skapa en ny fil som heter Table.js i src-mappen och lägg till följande kod.
exporterastandardfungeraTabell({theadData, tbodyData}) {
lämna tillbaka (
<tabell>
<thead>
<tr>
// rubrikrad
</tr>
</thead>
<kroppen>
// kroppsdata
</tbody>
</table>
);
}
Den här komponenten tar theadData och tBodyData som rekvisita. theadData innehåller data som du kommer att visa i rubrikraden. Appen kommer att hämta denna data från JSON-filen och lämna över den till tabellkomponenten.
Skapa en funktion i App.js anropade getHeadings() och lägg till följande.
konst getHeadings = () => {
lämna tillbakaObjekt.keys (data[0]);
}Eftersom nycklarna för varje objekt i JSON-filen är lika, kan du helt enkelt använda nycklarna från det första objektet.
Kom ihåg att importera data.json i App.js.
importera data från "./data.json"
När du renderar tabellkomponenten skickar du rubriken och JSON-data som rekvisita.
<Tabell theadData={getHeadings()} tbodyData={data}/>Skapa rubrikraden
I det här steget skapar du en komponent för att rendera ett objekt i rubrikraden. Den här komponenten itererar över rubrikerna med metoden map() .
I Table.js lägger du till koden för att iterera över rubrikerna inuti thead-taggen.
<tr>
{theadData.map (rubrik => {
lämna tillbaka <th key={rubrik}>{rubrik}</th>
})}
</tr>Därefter kommer du att fylla i tabellens brödtext.
Skapa kroppsraderna
Tabellkroppen återger raddata. Eftersom Table.js tar emot data som en array av objekt, måste du iterera över den först för att få varje objekt som representerar en rad.
Så, i Table.js, iterera över tBodyData-rekvisiten så här:
<kroppen>
{tbodyData.map((rad, index) => {
lämna tillbaka <tr nyckel={index}>
// rad data
</tr>;
})}
</tbody>
Varje radobjekt kommer att likna objektexemplet nedan.
konst rad = {
"id": 1,
"förnamn": "Ethelred",
"efternamn": "Långsamt",
"e-post": "[email protected]"
}
För att visa var och en av dessa objekt måste du iterera över objektets nycklar. I varje iteration kommer du att hämta egenskapen som matchar den nyckeln i radobjektet. Eftersom dessa nycklar är samma som rubrikerna, använd värdena från theadData prop.
Ändra tr-taggen för att visa raddata enligt nedan.
<tr nyckel={index}>
// theadData innehåller nycklarna
{theadData.map((nyckel, index) => {
lämna tillbaka <td key={rad[nyckel]}>{rad[nyckel]}</td>
})}
</tr>;
För att sammanföra allt, borde tabellkomponenten se ut så här:
exporterastandardfungeraTabell({theadData, tbodyData}) {
lämna tillbaka (
<tabell>
<thead>
<tr>
{theadData.map (rubrik => {
lämna tillbaka <th key={rubrik}>{rubrik}</th>
})}
</tr>
</thead>
<kroppen>
{tbodyData.map((rad, index) => {
lämna tillbaka <tr nyckel={index}>
{theadData.map((nyckel, index) => {
lämna tillbaka <td key={rad[nyckel]}>{rad[nyckel]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
I den
element, itererar komponenten över datamatrisen och returnerar tabellraden för varje objekt.Använda tabellkomponenten
Importera tabell i App.js och rendera den enligt nedan:
importera Tabell från './Tabell';
importera data från "./data.json"
fungeraApp() {
konst getHeadings = () => {
lämna tillbakaObjekt.keys (data[0]);
}
lämna tillbaka (
<div className="behållare">
<Tabell theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
exporterastandard App;
Tabellkomponenten tar theadData och tbodyData som rekvisita. theadData innehåller rubrikerna som genereras från nycklarna till det första objektet i JSON-data, och tbodyData innehåller hela JSON-filen.
Styling med CSS-moduler
Du genererade en React-tabellkomponent från en JSON-fil i den här handledningen. Du lärde dig också hur du kan manipulera JSON-data för att passa dina behov. Du kan förbättra utseendet på din tabell genom att lägga till lite CSS till den. För att skapa lokalt omfångade CSS-stilar, överväg att använda CSS-moduler. Den är enkel att använda och lätt att komma igång med om du använder en skapa-reagera-app.