Один из самых простых способов отделить данные от HTML-документов — сохранить их в формате JSON. JSON популярен и с ним легко работать, особенно в JavaScript.

В React имеет смысл обслуживать данные JSON через таблицы с помощью компонента. Этот компонент сможет создать таблицу, которая масштабируется с данными JSON. Результирующая таблица может иметь столько строк, сколько необходимо, поскольку данные не являются жестко запрограммированными.

Что тебе понадобится

Вам понадобится установленный на вашем компьютере Node.js, чтобы следовать этому руководству, и базовое понимание того, как работает React.

Перед созданием таблицы вам необходимо создать новый проект React если у вас его нет.

Создание данных JSON

В таблице будут использоваться данные, хранящиеся в файле JSON. Ты можешь получить эти данные из конечной точки API в реальном приложении.

В папке src создайте новый файл с именем данные.json и добавьте следующее:

[{
"я бы": 1,
"Имя": "Этельред",
"фамилия": "Медленно",
"Эл. адрес": "[email protected]
"
},{
"я бы": 2,
"Имя": "Рета",
"фамилия": "Вулмер",
"Эл. адрес": "[email protected]"
},{
"я бы": 3,
"Имя": "Арабель",
"фамилия": "Пестор",
"Эл. адрес": "[email protected]"
}]

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

Ключи объекта — идентификатор, имя, фамилия и адрес электронной почты — являются заголовками, а соответствующие им свойства составляют тело таблицы.

Создание табличного компонента

Создайте новый файл с именем Таблица.js в папке src и добавьте следующий код.

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

Этот компонент принимает theadData и tBodyData в качестве реквизита. theadData содержит данные, которые вы будете отображать в строке заголовка. Приложение будет получать эти данные из файла JSON и передавать их компоненту таблицы.

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

константа получитьзаголовки = () => {
возвращатьсяОбъект.keys (данные[0]);
}

Поскольку ключи для каждого объекта в файле JSON похожи, вы можете просто использовать ключи из первого объекта.

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

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

Когда вы визуализируете компонент таблицы, передайте заголовок и данные JSON в качестве реквизита.

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

Создание строки заголовка

На этом шаге вы создадите компонент для отображения элемента в строке заголовка. Этот компонент будет перебирать заголовки с помощью метода map().

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

<тр>
 {theadData.map (заголовок => {
 возвращаться <ключ = {заголовок}>{заголовок}</th>
 })}
</tr>

Далее вы заполните тело таблицы.

Создание строк тела

Тело таблицы отображает данные строки. Поскольку Table.js получает данные в виде массива объектов, вам нужно сначала выполнить итерацию по ним, чтобы получить каждый объект, представляющий строку.

Итак, в Table.js перебираем свойство tBodyData следующим образом:

<тело>
 {tbodyData.map((строка, индекс) => {
 возвращаться <tr ключ = {индекс}>
// Данные ряда
</tr>;
 })}
</tbody>

Каждый объект строки будет похож на пример объекта ниже.

константа строка = {
"я бы": 1,
"Имя": "Этельред",
"фамилия": "Медленно",
"Эл. адрес": "[email protected]"
}

Чтобы отобразить каждый из этих элементов, вам нужно будет перебрать ключи объекта. На каждой итерации вы будете получать свойство, соответствующее этому ключу в объекте строки. Поскольку эти ключи совпадают с заголовками, используйте значения из реквизита theadData.

Измените тег tr, чтобы отобразить данные строки, как показано ниже.

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

Собрав все вместе, компонент Table должен выглядеть так:

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

в

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

Использование табличного компонента

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

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

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

Стилизация с помощью модулей CSS

В этом руководстве вы создали компонент таблицы React из файла JSON. Вы также узнали, как можно манипулировать данными JSON в соответствии со своими потребностями. Вы можете улучшить внешний вид своей таблицы, добавив в нее CSS. Чтобы создать стили CSS с локальной областью действия, рассмотрите возможность использования модулей CSS. Он прост в использовании и с ним легко начать работу, если вы используете приложение create-react-app.