Один из самых простых способов отделить данные от 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.
