Az adatok HTML-dokumentumaitól való elkülönítésének egyik legegyszerűbb módja, ha JSON-ban tárolja azokat. A JSON népszerű és könnyen kezelhető, különösen JavaScriptben.
A Reactban célszerű a JSON-adatokat táblákon keresztül egy összetevő használatával szolgálni. Ez az összetevő képes lesz létrehozni egy táblázatot, amely a JSON-adatokkal skálázódik. Az eredményül kapott táblázat annyi sorból állhat, amennyire szüksége van, mivel az adatok nincsenek merevkódolva.
Amire szüksége lesz
Ennek az oktatóanyagnak a követéséhez és a React működésének alapvető megértéséhez telepítenie kell a Node.js fájlt a gépére.
A táblázat elkészítése előtt meg kell tennie hozzon létre egy új React projektet ha nincs ilyened.
JSON-adatok létrehozása
A táblázat egy JSON-fájlban tárolt adatokat fog használni. Te talán lekérni ezeket az adatokat egy API-végpontról egy valós alkalmazásban.
Az src mappában hozzon létre egy új fájlt data.json és add hozzá a következőket:
[{
"id": 1,
"keresztnév": "Ethelred",
"vezetéknév": "Lassan",
"email": "[email protected]"
},{
"id": 2,
"keresztnév": "Reta",
"vezetéknév": "Woolmer",
"email": "[email protected]"
},{
"id": 3,
"keresztnév": "Arabel",
"vezetéknév": "Pestor",
"email": "[email protected]"
}]
Ez egy egyszerű JSON-fájl, amely három objektumot tartalmaz.
Az objektumkulcsok – az azonosító, a keresztnév, a vezetéknév és az e-mail cím – a fejlécek, míg a hozzájuk tartozó tulajdonságok alkotják a táblázat törzsét.
A táblázat komponens létrehozása
Hozzon létre egy új fájlt, melynek neve Table.js az src mappába, és adja hozzá a következő kódot.
exportalapértelmezettfunkcióasztal({theadData, tbodyData}) {
Visszatérés (
<asztal>
<thead>
<tr>
// fejléc sor
</tr>
</thead>
<tbody>
// testadatok
</tbody>
</table>
);
}
Ez a komponens a theadData és a tBodyData kellékeket használja. theadData tartalmazza azokat az adatokat, amelyeket a fejlécsorban fog megjeleníteni. Az alkalmazás ezeket az adatokat a JSON-fájlból szerzi be, és átadja a Table összetevőnek.
Hozzon létre egy függvényt App.js getHeadings() nevet, és adja hozzá a következőket.
const getHeadings = () => {
VisszatérésTárgy.keys (data[0]);
}Mivel a JSON-fájlban lévő objektumok kulcsai hasonlóak, egyszerűen használhatja az első objektum kulcsait.
Ne felejtse el importálni a data.json fájlt az App.js fájlba.
import adat tól től "./data.json"
A táblázat összetevő előállításakor adja át a fejlécet és a JSON-adatokat kellékként.
<Táblázat theadData={getHeadings()} tbodyData={data}/>A fejlécsor létrehozása
Ebben a lépésben létrehoz egy összetevőt a fejlécsorban lévő elem megjelenítéséhez. Ez a komponens a map() metódussal iterálja a címsorokat.
A Table.js fájlban adja hozzá a kódot, amely a címke fejlécei fölött iterál.
<tr>
{theadData.map (címsor => {
Visszatérés <th key={címsor}>{cím}</th>
})}
</tr>Ezután töltse fel a tábla törzsét.
A törzssorok létrehozása
A táblázat törzse megjeleníti a sor adatait. Mivel a Table.js objektumok tömbjeként fogadja az adatokat, először át kell iterálnia, hogy minden objektum egy sort reprezentáljon.
Tehát a Table.js-ben iteráljon a tBodyData propon a következőképpen:
<tbody>
{tbodyData.map((sor, index) => {
Visszatérés <tr kulcs={index}>
// sor adatok
</tr>;
})}
</tbody>
Minden sorobjektum hasonló lesz az alábbi objektumpéldához.
const sor = {
"id": 1,
"keresztnév": "Ethelred",
"vezetéknév": "Lassan",
"email": "[email protected]"
}
Ezen elemek mindegyikének megjelenítéséhez ismételnie kell az objektum kulcsait. Minden iterációban lekéri azt a tulajdonságot, amely megfelel a sorobjektum kulcsának. Mivel ezek a kulcsok megegyeznek a címsorokkal, használja a theadData prop értékeit.
Módosítsa a tr címkét a soradatok megjelenítéséhez az alábbiak szerint.
<tr kulcs={index}>
// theadData tartalmazza a kulcsokat
{theadData.map((kulcs, index) => {
Visszatérés <td kulcs={sor[kulcs]}>{sor[kulcs]}</td>
})}
</tr>;
Mindent összeadva a Table komponensnek így kell kinéznie:
exportalapértelmezettfunkcióasztal({theadData, tbodyData}) {
Visszatérés (
<asztal>
<thead>
<tr>
{theadData.map (címsor => {
Visszatérés <th key={címsor}>{cím}</th>
})}
</tr>
</thead>
<tbody>
{tbodyData.map((sor, index) => {
Visszatérés <tr kulcs={index}>
{theadData.map((kulcs, index) => {
Visszatérés <td kulcs={sor[kulcs]}>{sor[kulcs]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
Ban,-ben
elemet, az összetevő iterál az adattömbön, és minden objektumhoz visszaadja a táblázat sorát.A táblázat komponens használata
Importálja a táblázatot az App.js-be, és jelenítse meg az alábbiak szerint:
import asztal tól től './Asztal';
import adat tól től "./data.json"
funkcióApp() {
const getHeadings = () => {
VisszatérésTárgy.keys (data[0]);
}
Visszatérés (
<div className="tartály">
<Táblázat theadData={getHeadings()} tbodyData={data}/>
</div>
);
}
exportalapértelmezett App;
A táblázat komponens a theadData és a tbodyData kellékeket használja. A theadData tartalmazza a JSON-adatok első elemének kulcsaiból generált fejléceket, a tbodyData pedig a teljes JSON-fájlt.
Styling CSS modulokkal
Ebben az oktatóanyagban egy React tábla összetevőt hozott létre egy JSON-fájlból. Azt is megtanulta, hogyan kezelheti a JSON-adatokat az igényeinek megfelelően. Javíthatja a táblázat megjelenését, ha hozzáad egy CSS-t. Helyi hatókörű CSS-stílusok létrehozásához fontolja meg a CSS-modulok használatát. Használata egyszerű, és könnyen elkezdhető, ha létrehoz-react-alkalmazást használ.