Uno dei modi più semplici per separare i dati dai documenti HTML è archiviarli in JSON. JSON è popolare e facile da usare, specialmente in JavaScript.
In React, ha senso fornire dati JSON tramite tabelle utilizzando un componente. Quel componente sarà in grado di generare una tabella che si adatta ai dati JSON. La tabella risultante può avere tutte le righe necessarie poiché i dati non sono hardcoded.
Di cosa avrai bisogno
Avrai bisogno di Node.js installato sulla tua macchina per seguire questo tutorial e una comprensione di base di come funziona React.
Prima di creare la tabella, sarà necessario creare un nuovo progetto React se non ne hai uno.
Creazione dei dati JSON
La tabella utilizzerà i dati archiviati in un file JSON. Tu potresti recuperare questi dati da un endpoint API in un'applicazione reale.
Nella cartella src, crea un nuovo file chiamato data.json e aggiungi quanto segue:
[{
"id": 1,
"nome di battesimo": "Ethelred",
"cognome": "Lentamente",
"e-mail": "[email protected]"
},{
"id": 2,
"nome di battesimo": "Reta",
"cognome": "lanaio",
"e-mail": "[email protected]"
},{
"id": 3,
"nome di battesimo": "Arabel",
"cognome": "Pestore",
"e-mail": "[email protected]"
}]
Questo è un semplice file JSON contenente tre oggetti.
Le chiavi dell'oggetto - l'id, il nome, il cognome e l'e-mail - sono le intestazioni, mentre le loro proprietà corrispondenti costituiscono il corpo della tabella.
Creazione del componente tabella
Crea un nuovo file chiamato Table.js nella cartella src e aggiungi il codice seguente.
esportarepredefinitofunzioneTavolo({theadData, tbodyData}) {
Restituzione (
<tavolo>
<il capo>
<tr>
// riga di intestazione
</tr>
</thead>
<tbody>
// dati del corpo
</tbody>
</table>
);
}
Questo componente prende theadData e tBodyData come prop. theadData contiene i dati che visualizzerai nella riga di intestazione. L'app otterrà questi dati dal file JSON e li consegnerà al componente Table.
Crea una funzione in App.js chiamato getHeadings() e aggiungere quanto segue.
cost getHeadings = () => {
RestituzioneOggetto.chiavi (dati[0]);
}Poiché le chiavi per ogni oggetto nel file JSON sono simili, puoi semplicemente utilizzare le chiavi del primo oggetto.
Ricorda di importare data.json in App.js.
importare dati da "./data.json"
Quando esegui il rendering del componente Table, passa l'intestazione e i dati JSON come prop.
<Tabella theadData={getHeadings()} tbodyData={data}/>Creazione della riga di intestazione
In questo passaggio creerai un componente per eseguire il rendering di un elemento nella riga di intestazione. Questo componente eseguirà un'iterazione sulle intestazioni utilizzando il metodo map().
In Table.js, aggiungi il codice per scorrere le intestazioni all'interno del tag thead.
<tr>
{theadData.map (intestazione => {
Restituzione <esima chiave={intestazione}>{intestazione}</th>
})}
</tr>Successivamente, compilerai il corpo della tabella.
Creazione delle righe del corpo
Il corpo della tabella esegue il rendering dei dati della riga. Poiché Table.js riceve i dati come una matrice di oggetti, dovrai prima eseguire un'iterazione su di essi per ottenere ogni oggetto che rappresenti una riga.
Quindi, in Table.js, scorrere il prop tBodyData in questo modo:
<tbody>
{tbodyData.map((riga, indice) => {
Restituzione <chiave tr={indice}>
// dati di riga
</tr>;
})}
</tbody>
Ogni oggetto riga sarà simile all'esempio di oggetto riportato di seguito.
cost riga = {
"id": 1,
"nome di battesimo": "Ethelred",
"cognome": "Lentamente",
"e-mail": "[email protected]"
}
Per visualizzare ciascuno di questi elementi, sarà necessario scorrere le chiavi dell'oggetto. In ogni iterazione, recupererai la proprietà che corrisponde a quella chiave nell'oggetto riga. Poiché queste chiavi sono le stesse delle intestazioni, usa i valori del prop theadData.
Modificare il tag tr per visualizzare i dati della riga come mostrato di seguito.
<chiave tr={indice}>
// theadData contiene le chiavi
{theadData.map((chiave, indice) => {
Restituzione <td chiave={riga[chiave]}>{riga[chiave]}</td>
})}
</tr>;
Riunendo tutto, il componente Tabella dovrebbe apparire così:
esportarepredefinitofunzioneTavolo({theadData, tbodyData}) {
Restituzione (
<tavolo>
<il capo>
<tr>
{theadData.map (intestazione => {
Restituzione <esima chiave={intestazione}>{intestazione}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map((riga, indice) => {
Restituzione <chiave tr={indice}>
{theadData.map((chiave, indice) => {
Restituzione <td chiave={riga[chiave]}>{riga[chiave]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
Nel
elemento, il componente esegue un'iterazione sull'array di dati e restituisce la riga della tabella per ciascun oggetto.Utilizzo del componente tabella
Importa la tabella in App.js e renderizzala come mostrato di seguito:
importare Tavolo da './Tavolo';
importare dati da "./data.json"
funzioneApp() {
cost getHeadings = () => {
RestituzioneOggetto.chiavi (dati[0]);
}
Restituzione (
<div nomeclasse="contenitore">
<Tabella theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
esportarepredefinito App;
Il componente table prende theadData e tbodyData come prop. theadData contiene le intestazioni generate dalle chiavi del primo elemento nei dati JSON e tbodyData contiene l'intero file JSON.
Styling con i moduli CSS
Hai generato un componente della tabella React da un file JSON in questo tutorial. Hai anche imparato come manipolare i dati JSON per adattarli alle tue esigenze. Puoi migliorare l'aspetto della tua tabella aggiungendo alcuni CSS ad essa. Per creare stili CSS con ambito locale, considera l'utilizzo di moduli CSS. È semplice da usare e facile da usare se si utilizza un'applicazione create-react-app.