Taulukon luominen JSON-tiedoista Reactissa

Yksi yksinkertaisimmista tavoista erottaa tiedot HTML-asiakirjoista on tallentaa ne JSONiin. JSON on suosittu ja helppokäyttöinen, etenkin JavaScriptissä.

Reactissa on järkevää palvella JSON-tietoja taulukoiden kautta komponentin avulla. Tämä komponentti pystyy luomaan taulukon, joka skaalautuu JSON-tietojen kanssa. Tuloksena olevassa taulukossa voi olla niin monta riviä kuin se tarvitsee, koska tietoja ei ole koodattu.

Mitä tarvitset

Tarvitset Node.js: n asennettuna koneellesi, jotta voit seurata tätä opetusohjelmaa ja saada perustiedot Reactin toiminnasta.

Ennen kuin luot taulukon, sinun on tehtävä se luo uusi React-projekti jos sinulla ei ole sellaista.

JSON-tietojen luominen

Taulukko käyttää JSON-tiedostoon tallennettuja tietoja. Saatat noutaa nämä tiedot API-päätepisteestä tosielämän sovelluksessa.

Luo src-kansioon uusi tiedosto nimeltä data.json ja lisää seuraavat:

[{
"id": 1,
"etunimi": "Ethelred",
"sukunimi": "Hitaasti",
"sähköposti": "eslowly0@google.es"
},{
"id": 2,
"etunimi": "Reta",
"sukunimi





instagram viewer

": "Woolmer",
"sähköposti": "rwoolmer1@miibeian.gov.cn"
},{
"id": 3,
"etunimi": "Arabel",
"sukunimi": "Pestor",
"sähköposti": "apestor2@bloglovin.com"
}]

Tämä on yksinkertainen JSON-tiedosto, joka sisältää kolme objektia.

Objektiavaimet – id, etunimi, sukunimi ja sähköpostiosoite – ovat otsikoita, kun taas niitä vastaavat ominaisuudet muodostavat taulukon rungon.

Taulukkokomponentin luominen

Luo uusi tiedosto nimeltä Taulukko.js src-kansioon ja lisää seuraava koodi.

viedäoletuksenatoimintoPöytä({theadData, tbodyData}) {
palata (
<pöytä>
<thead>
<tr>
// otsikkorivi
</tr>
</thead>
<tbody>
// kehon tiedot
</tbody>
</table>
 );
}

Tämä komponentti ottaa theadData ja tBodyData rekvisiittana. theadData sisältää tiedot, jotka näytät otsikkorivillä. Sovellus hankkii nämä tiedot JSON-tiedostosta ja luovuttaa ne taulukkokomponentille.

Luo funktio sisään App.js kutsutaan getHeadings() ja lisää seuraava.

konst getHeadings = () => {
palataEsine.keys (data[0]);
}

Koska JSON-tiedoston jokaisen objektin avaimet ovat samanlaisia, voit yksinkertaisesti käyttää ensimmäisen objektin avaimia.

Muista tuoda data.json App.js: ssä.

tuonti tiedot alkaen "./data.json"

Kun hahmonnat Taulukko-komponentin, välitä otsikko ja JSON-tiedot rekvisiittana.

<Taulukko theadData={getHeadings()} tbodyData={data}/>

Otsikkorivin luominen

Tässä vaiheessa luot komponentin otsikkorivillä olevan kohteen renderöimiseksi. Tämä komponentti toistaa otsikot käyttämällä map()-menetelmää.

Lisää Table.js: ssä koodi, joka toistuu mainostunnisteen otsikoiden yli.

<tr>
 {theadData.map (otsikko => {
 palata <th key={otsikko}>{otsikko}</th>
 })}
</tr>

Seuraavaksi täytät taulukon rungon.

Runkorivien luominen

Taulukon runko hahmontaa rivitiedot. Koska Table.js vastaanottaa tiedot objektijoukona, sinun on ensin iteroitava sitä, jotta jokainen objekti edustaa riviä.

Table.js: ssa iteroi tBodyData-ehdotusta seuraavasti:

<tbody>
 {tbodyData.map((rivi, indeksi) => {
 palata <tr-avain={index}>
// rivin tiedot
</tr>;
 })}
</tbody>

Jokainen riviobjekti on samanlainen kuin alla oleva objektiesimerkki.

konst rivi = {
"id": 1,
"etunimi": "Ethelred",
"sukunimi": "Hitaasti",
"sähköposti": "eslowly0@google.es"
}

Kaikkien näiden kohteiden näyttämiseksi sinun on toistettava objektin näppäimiä. Jokaisessa iteraatiossa haetaan ominaisuus, joka vastaa riviobjektin avainta. Koska nämä avaimet ovat samat kuin otsikot, käytä arvoja theadData prop.

Muokkaa tr-tunnistetta näyttääksesi rivitiedot alla olevan kuvan mukaisesti.

<tr-avain={index}>
// theadData sisältää avaimet
 {theadData.map((avain, indeksi) => {
 palata <td avain={rivi[avain]}>{rivi[avain]}</td>
 })}
</tr>;

Kun kaikki yhdistetään, taulukkokomponentin pitäisi näyttää tältä:

viedäoletuksenatoimintoPöytä({theadData, tbodyData}) {
palata (
<pöytä>
<thead>
<tr>
 {theadData.map (otsikko => {
 palata <th key={otsikko}>{otsikko}</th>
 })}
</tr>
</thead>
<tbody>
 {tbodyData.map((rivi, indeksi) => {
 palata <tr-avain={index}>
 {theadData.map((avain, indeksi) => {
 palata <td avain={rivi[avain]}>{rivi[avain]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

Vuonna

elementti, komponentti toistuu tietotaulukossa ja palauttaa taulukkorivin jokaiselle objektille.

Taulukkokomponentin käyttäminen

Tuo taulukko App.js: ssä ja hahmonna se alla olevan kuvan mukaisesti:

tuonti Pöytä alkaen './Pöytä';
tuonti tiedot alkaen "./data.json"
toimintoSovellus() {
konst getHeadings = () => {
palataEsine.keys (data[0]);
 }
palata (
<div className="kontti">
<Taulukko theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
viedäoletuksena Sovellus;

Taulukkokomponentti ottaa rekvisiittana theadData ja tbodyData. theadData sisältää otsikot, jotka on luotu JSON-tietojen ensimmäisen kohteen avaimista, ja tbodyData sisältää koko JSON-tiedoston.

Muotoilu CSS-moduuleilla

Loit React-taulukkokomponentin JSON-tiedostosta tässä opetusohjelmassa. Opit myös, kuinka voit muokata JSON-tietoja tarpeidesi mukaan. Voit parantaa taulukkosi ulkoasua lisäämällä siihen CSS: ää. Jos haluat luoda paikallisesti suojattuja CSS-tyylejä, harkitse CSS-moduulien käyttöä. Se on helppokäyttöinen ja helppo aloittaa, jos käytät luo-reagoi-sovellusta.