Един от най-простите начини за отделяне на данни от вашите HTML документи е да ги съхранявате в JSON. JSON е популярен и лесен за работа, особено в JavaScript.

В React има смисъл да се обслужват JSON данни чрез таблици с помощта на компонент. Този компонент ще може да генерира таблица, която се мащабира с JSON данните. Получената таблица може да има толкова редове, колкото е необходимо, тъй като данните не са твърдо кодирани.

Какво ще ви трябва

Ще ви е необходим Node.js, инсталиран на вашата машина, за да следвате този урок и основно разбиране за това как работи React.

Преди да създадете таблицата, ще трябва създайте нов React проект ако нямате такъв.

Създаване на JSON данни

Таблицата ще използва данни, съхранени в JSON файл. Може би извлича тези данни от крайна точка на API в приложение от реалния живот.

В папката src създайте нов файл, наречен data.json и добавете следното:

[{
"документ за самоличност": 1,
"първо име": "Етелред",
"фамилия": "Бавно",
"електронна поща": "[email protected]"
},{
"документ за самоличност





instagram viewer


": 2,
"първо име": "Рета",
"фамилия": "Улмър",
"електронна поща": "[email protected]"
},{
"документ за самоличност": 3,
"първо име": "Арабел",
"фамилия": "Пестор",
"електронна поща": "[email protected]"
}]

Това е прост JSON файл, съдържащ три обекта.

Ключовете на обекта – идентификатор, собствено име, фамилия и имейл – са заглавията, докато съответните им свойства съставляват тялото на таблицата.

Създаване на компонента на таблицата

Създайте нов файл, наречен Table.js в папката src и добавете следния код.

износпо подразбиранефункцияТаблица({theadData, tbodyData}) {
връщане (
<маса>
<thead>
<тр>
// заглавен ред
</tr>
</thead>
<tbody>
// данни за тялото
</tbody>
</table>
 );
}

Този компонент приема adData и tBodyData като подпори. theadData съдържа данните, които ще покажете в заглавния ред. Приложението ще извлече тези данни от JSON файла и ще ги предаде на компонента Table.

Създайте функция в App.js наречен getHeadings() и добавете следното.

конст getHeadings = () => {
връщанеОбект.keys (данни[0]);
}

Тъй като ключовете за всеки обект в JSON файла са подобни, можете просто да използвате ключовете от първия обект.

Не забравяйте да импортирате data.json в App.js.

импортиране данни от "./data.json"

Когато изобразявате компонента Table, предайте заглавието и JSON данните като реквизити.

<Таблица theadData={getHeadings()} tbodyData={data}/>

Създаване на заглавния ред

В тази стъпка ще създадете компонент за изобразяване на елемент в заглавния ред. Този компонент ще обхожда заглавията с помощта на метода map().

В Table.js добавете кода за итериране на заглавията в тага thead.

<тр>
 {theadData.map (заглавие => {
 връщане <th key={heading}>{заглавие}</th>
 })}
</tr>

След това ще попълните тялото на таблицата.

Създаване на редовете на тялото

Тялото на таблицата изобразява данните за реда. Тъй като Table.js получава данните като масив от обекти, ще трябва първо да го обходите, за да получите всеки обект, представляващ ред.

И така, в Table.js повторете tBodyData prop по този начин:

<tbody>
 {tbodyData.map((ред, индекс) => {
 връщане <tr ключ={индекс}>
// ред данни
</tr>;
 })}
</tbody>

Всеки ред обект ще бъде подобен на примера за обект по-долу.

конст ред = {
"документ за самоличност": 1,
"първо име": "Етелред",
"фамилия": "Бавно",
"електронна поща": "[email protected]"
}

За да покажете всеки от тези елементи, ще трябва да преминете през ключовете на обекта. При всяка итерация ще извличате свойството, което съответства на този ключ в обекта ред. Тъй като тези ключове са същите като заглавията, използвайте стойностите от theadData prop.

Променете маркера tr, за да покажете данните на реда, както е показано по-долу.

<tr ключ={индекс}>
// theadData съдържа ключовете
 {theadData.map((ключ, индекс) => {
 връщане <td ключ={ред[ключ]}>{ред[ключ]}</td>
 })}
</tr>;

Събирайки всичко заедно, компонентът Table трябва да изглежда така:

износпо подразбиранефункцияТаблица({theadData, tbodyData}) {
връщане (
<маса>
<thead>
<тр>
 {theadData.map (заглавие => {
 връщане <th key={heading}>{заглавие}</th>
 })}
</tr>
</thead>
<tbody>
 {tbodyData.map((ред, индекс) => {
 връщане <tr ключ={индекс}>
 {theadData.map((ключ, индекс) => {
 връщане <td ключ={ред[ключ]}>{ред[ключ]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

В

елемент, компонентът обхожда масива от данни и връща реда на таблицата за всеки обект.

Използване на компонента Table

Импортирайте таблица в App.js и я изобразете, както е показано по-долу:

импортиране Таблица от './Таблица';
импортиране данни от "./data.json"
функцияПриложение() {
конст getHeadings = () => {
връщанеОбект.keys (данни[0]);
 }
връщане (
<div className="контейнер">
<Таблица theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
износпо подразбиране Приложение;

Компонентът на таблицата приема adData и tbodyData като подпори. theadData съдържа заглавията, генерирани от ключовете на първия елемент в JSON данните, а tbodyData съдържа целия JSON файл.

Оформяне с CSS модули

Вие генерирахте компонент на React таблица от JSON файл в този урок. Освен това научихте как можете да манипулирате JSON данни, за да отговарят на вашите нужди. Можете да подобрите външния вид на вашата таблица, като добавите малко CSS към нея. За да създадете CSS стилове с локален обхват, обмислете използването на CSS модули. Той е лесен за използване и лесен за започване, ако използвате приложение за създаване-реагиране на приложение.