Een van de meest eenvoudige manieren om gegevens van uw HTML-documenten te scheiden, is door deze op te slaan in JSON. JSON is populair en gemakkelijk om mee te werken, vooral in JavaScript.
In React is het logisch om JSON-gegevens via tabellen te serveren met behulp van een component. Dat onderdeel kan een tabel genereren die schaalt met de JSON-gegevens. De resulterende tabel kan zoveel rijen bevatten als nodig is, aangezien de gegevens niet hard gecodeerd zijn.
Wat je nodig zult hebben
Je moet Node.js op je computer hebben geïnstalleerd om deze tutorial en een basiskennis van hoe React werkt te volgen.
Voordat u de tabel maakt, moet u: een nieuw React-project maken als je er geen hebt.
De JSON-gegevens maken
De tabel gebruikt gegevens die zijn opgeslagen in een JSON-bestand. Je zou kunnen deze gegevens ophalen van een API-eindpunt in een real-life applicatie.
Maak in de src-map een nieuw bestand met de naam data.json en voeg het volgende toe:
[{
"ID kaart": 1,
"Voornaam": "Ethelred",
"achternaam
": "Langzaam",
"e-mail": "[email protected]"
},{
"ID kaart": 2,
"Voornaam": "Reta",
"achternaam": "Woolmer",
"e-mail": "[email protected]"
},{
"ID kaart": 3,
"Voornaam": "Arabel",
"achternaam": "Pestor",
"e-mail": "[email protected]"
}]
Dit is een eenvoudig JSON-bestand met drie objecten.
De objectsleutels - de id, voornaam, achternaam en e-mail - zijn de koppen, terwijl hun bijbehorende eigenschappen de hoofdtekst van de tabel vormen.
De tabelcomponent maken
Maak een nieuw bestand met de naam Tabel.js in de src-map en voeg de volgende code toe.
exporterenstandaardfunctieTafel({theadData, tbodyData}) {
opbrengst (
<tafel>
<hoofd>
<tr>
// koprij
</tr>
</thead>
<tlichaam>
// lichaamsgegevens
</tbody>
</table>
);
}
Deze component neemt theadData en tBodyData als rekwisieten. theadData bevat de gegevens die u in de koprij weergeeft. De app haalt deze gegevens uit het JSON-bestand en geeft deze door aan de tabelcomponent.
Maak een functie in App.js genaamd getHeadings() en voeg het volgende toe.
const getHeadings = () => {
opbrengstObject.keys (gegevens[0]);
}Aangezien de sleutels voor elk object in het JSON-bestand vergelijkbaar zijn, kunt u eenvoudig de sleutels van het eerste object gebruiken.
Vergeet niet om data.json te importeren in App.js.
importeren gegevens van "./data.json"
Wanneer u de tabelcomponent rendert, geeft u de kop en de JSON-gegevens door als rekwisieten.
<Tabel theadData={getHeadings()} tbodyData={data}/>De koptekstrij maken
In deze stap maakt u een component om een item in de koprij weer te geven. Deze component zal de koppen herhalen met behulp van de map()-methode.
Voeg in Table.js de code toe om de koppen in de thead-tag te herhalen.
<tr>
{theadData.map (kop => {
opbrengst <th key={heading}>{kop}</th>
})}
</tr>Vervolgens vult u de hoofdtekst van de tabel.
De lichaamsrijen maken
De tabeltekst geeft de rijgegevens weer. Aangezien Table.js de gegevens ontvangt als een reeks objecten, moet u deze eerst herhalen om ervoor te zorgen dat elk object een rij vertegenwoordigt.
Dus herhaal in Table.js de tBodyData-prop als volgt:
<tlichaam>
{tbodyData.map((rij, index) => {
opbrengst <tr-toets={index}>
// rijgegevens
</tr>;
})}
</tbody>
Elk rijobject is vergelijkbaar met het onderstaande objectvoorbeeld.
const rij = {
"ID kaart": 1,
"Voornaam": "Ethelred",
"achternaam": "Langzaam",
"e-mail": "[email protected]"
}
Om elk van deze items weer te geven, moet u de sleutels van het object herhalen. In elke iteratie haalt u de eigenschap op die overeenkomt met die sleutel in het rijobject. Aangezien deze sleutels hetzelfde zijn als de koppen, gebruikt u de waarden uit de theadData-prop.
Wijzig de tr-tag om de rijgegevens weer te geven, zoals hieronder wordt weergegeven.
<tr-toets={index}>
// theadData bevat de sleutels
{theadData.map((sleutel, index) => {
opbrengst <td-toets={rij[toets]}>{rij[toets]}</td>
})}
</tr>;
Door alles bij elkaar te brengen, zou het onderdeel Tabel er als volgt uit moeten zien:
exporterenstandaardfunctieTafel({theadData, tbodyData}) {
opbrengst (
<tafel>
<hoofd>
<tr>
{theadData.map (kop => {
opbrengst <th key={heading}>{kop}</th>
})}
</tr>
</thead>
<tlichaam>
{tbodyData.map((rij, index) => {
opbrengst <tr-toets={index}>
{theadData.map((sleutel, index) => {
opbrengst <td-toets={rij[toets]}>{rij[toets]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
In de
element, itereert de component over de gegevensarray en retourneert de tabelrij voor elk object.De tabelcomponent gebruiken
Importeer de tabel in App.js en render deze zoals hieronder weergegeven:
importeren Tafel van './Tafel';
importeren gegevens van "./data.json"
functieApp() {
const getHeadings = () => {
opbrengstObject.keys (gegevens[0]);
}
opbrengst (
<div className="container">
<Tabel theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
exporterenstandaard App;
De tabelcomponent neemt theadData en tbodyData als rekwisieten. theadData bevat de koppen die zijn gegenereerd op basis van de sleutels van het eerste item in de JSON-gegevens en tbodyData bevat het hele JSON-bestand.
Styling met CSS-modules
U hebt in deze zelfstudie een React-tabelcomponent gegenereerd vanuit een JSON-bestand. U hebt ook geleerd hoe u JSON-gegevens kunt manipuleren om aan uw behoeften te voldoen. U kunt het uiterlijk van uw tabel verbeteren door er wat CSS aan toe te voegen. Overweeg om CSS-modules te gebruiken om lokaal bereikbare CSS-stijlen te maken. Het is eenvoudig te gebruiken en gemakkelijk om mee aan de slag te gaan als u een create-react-app-toepassing gebruikt.