Eine der einfachsten Möglichkeiten, Daten von Ihren HTML-Dokumenten zu trennen, besteht darin, sie in JSON zu speichern. JSON ist beliebt und einfach zu handhaben, insbesondere in JavaScript.
In React ist es sinnvoll, JSON-Daten über Tabellen mittels einer Komponente bereitzustellen. Diese Komponente kann eine Tabelle generieren, die mit den JSON-Daten skaliert wird. Die resultierende Tabelle kann beliebig viele Zeilen haben, da die Daten nicht fest codiert sind.
Was wirst du brauchen
Sie müssen Node.js auf Ihrem Computer installiert haben, um diesem Tutorial folgen zu können, und ein grundlegendes Verständnis der Funktionsweise von React haben.
Bevor Sie die Tabelle erstellen, müssen Sie Erstellen Sie ein neues React-Projekt wenn du keine hast.
Erstellen der JSON-Daten
Die Tabelle verwendet Daten, die in einer JSON-Datei gespeichert sind. Du könntest Rufen Sie diese Daten von einem API-Endpunkt ab in einer realen Anwendung.
Erstellen Sie im src-Ordner eine neue Datei mit dem Namen data.json und folgendes hinzufügen:
[{
"Ich würde": 1,
"Vorname": "Ethelred",
"Nachname": "Langsam",
"Email": "[email protected]"
},{
"Ich würde": 2,
"Vorname": "Reta",
"Nachname": "Woolmer",
"Email": "[email protected]"
},{
"Ich würde": 3,
"Vorname": "Arabel",
"Nachname": "Pestor",
"Email": "[email protected]"
}]
Dies ist eine einfache JSON-Datei, die drei Objekte enthält.
Die Objektschlüssel – ID, Vorname, Nachname und E-Mail – sind die Überschriften, während ihre entsprechenden Eigenschaften den Hauptteil der Tabelle bilden.
Erstellen der Tabellenkomponente
Erstellen Sie eine neue Datei mit dem Namen Tabelle.js im src-Ordner und fügen Sie den folgenden Code hinzu.
ExportUrsprünglichFunktionTisch({theadData, tbodyData}) {
Rückkehr (
<Tisch>
<Kopf>
<tr>
// Kopfzeile
</tr>
</thead>
<tbody>
// Körperdaten
</tbody>
</table>
);
}
Diese Komponente nimmt theadData und tBodyData als Requisiten. theadData enthält die Daten, die Sie in der Kopfzeile anzeigen. Die App bezieht diese Daten aus der JSON-Datei und übergibt sie an die Tabellenkomponente.
Erstellen Sie eine Funktion in App.js rief getHeadings() auf und füge Folgendes hinzu.
konst getHeadings = () => {
RückkehrObjekt.keys (Daten[0]);
}Da die Schlüssel für jedes Objekt in der JSON-Datei ähnlich sind, können Sie einfach die Schlüssel aus dem ersten Objekt verwenden.
Denken Sie daran, data.json in App.js zu importieren.
importieren Daten aus "./data.json"
Übergeben Sie beim Rendern der Table-Komponente die Überschrift und die JSON-Daten als Requisiten.
<Tabelle theadData={getHeadings()} tbodyData={data}/>Erstellen der Kopfzeile
In diesem Schritt erstellen Sie eine Komponente zum Rendern eines Elements in der Kopfzeile. Diese Komponente durchläuft die Überschriften mit der Methode map().
Fügen Sie in Table.js den Code hinzu, um die Überschriften innerhalb des Tags „tad“ zu durchlaufen.
<tr>
{theadData.map (Überschrift => {
Rückkehr <ter Schlüssel={Überschrift}>{Überschrift}</th>
})}
</tr>Als Nächstes füllen Sie den Hauptteil der Tabelle aus.
Erstellen der Körperreihen
Der Tabellenkörper rendert die Zeilendaten. Da Table.js die Daten als ein Array von Objekten empfängt, müssen Sie es zuerst durchlaufen, um jedes Objekt zu erhalten, das eine Zeile darstellt.
Iterieren Sie also in Table.js wie folgt über die tBodyData-Prop:
<tbody>
{tbodyData.map ((Zeile, Index) => {
Rückkehr <tr key={index}>
// Zeilendaten
</tr>;
})}
</tbody>
Jedes Zeilenobjekt ähnelt dem Objektbeispiel unten.
konst Zeile = {
"Ich würde": 1,
"Vorname": "Ethelred",
"Nachname": "Langsam",
"Email": "[email protected]"
}
Um jedes dieser Elemente anzuzeigen, müssen Sie über die Schlüssel des Objekts iterieren. Bei jeder Iteration rufen Sie die Eigenschaft ab, die diesem Schlüssel im Zeilenobjekt entspricht. Da diese Schlüssel mit den Überschriften identisch sind, verwenden Sie die Werte aus der theadData-Prop.
Ändern Sie das tr-Tag, um die Zeilendaten wie unten gezeigt anzuzeigen.
<tr key={index}>
// theadData enthält die Schlüssel
{theadData.map((Schlüssel, Index) => {
Rückkehr <td key={Zeile[Taste]}>{Zeile[Schlüssel]}</td>
})}
</tr>;
Wenn Sie alles zusammenbringen, sollte die Tabellenkomponente so aussehen:
ExportUrsprünglichFunktionTisch({theadData, tbodyData}) {
Rückkehr (
<Tisch>
<Kopf>
<tr>
{theadData.map (Überschrift => {
Rückkehr <ter Schlüssel={Überschrift}>{Überschrift}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map ((Zeile, Index) => {
Rückkehr <tr key={index}>
{theadData.map((Schlüssel, Index) => {
Rückkehr <td key={Zeile[Taste]}>{Zeile[Schlüssel]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
In dem
-Element, iteriert die Komponente über das Datenarray und gibt die Tabellenzeile für jedes Objekt zurück.Verwenden der Tabellenkomponente
Importieren Sie die Tabelle in App.js und rendern Sie sie wie unten gezeigt:
importieren Tisch aus './Tisch';
importieren Daten aus "./data.json"
FunktionApp() {
konst getHeadings = () => {
RückkehrObjekt.keys (Daten[0]);
}
Rückkehr (
<div Klassenname="Container">
<Tabelle theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
ExportUrsprünglich Anwendung;
Die Tabellenkomponente nimmt theadData und tbodyData als Requisiten. theadData enthält die Überschriften, die aus den Schlüsseln des ersten Elements in den JSON-Daten generiert wurden, und tbodyData enthält die gesamte JSON-Datei.
Styling mit CSS-Modulen
In diesem Tutorial haben Sie eine React-Tabellenkomponente aus einer JSON-Datei generiert. Sie haben auch gelernt, wie Sie JSON-Daten an Ihre Bedürfnisse anpassen können. Sie können das Aussehen Ihrer Tabelle verbessern, indem Sie ihr etwas CSS hinzufügen. Um lokal bezogene CSS-Stile zu erstellen, ziehen Sie die Verwendung von CSS-Modulen in Betracht. Es ist einfach zu bedienen und leicht zu starten, wenn Sie eine Create-React-App-Anwendung verwenden.