как сделать таблицу react

Аватар пользователя Aleksey
Aleksey
13 апреля 2023

Для создания таблицы в React необходимо использовать компонент table. Вот пример базовой таблицы:

import React from 'react';

const Table = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Заголовок 1</th>
          <th>Заголовок 2</th>
          <th>Заголовок 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Ячейка 1</td>
          <td>Ячейка 2</td>
          <td>Ячейка 3</td>
        </tr>
        <tr>
          <td>Ячейка 4</td>
          <td>Ячейка 5</td>
          <td>Ячейка 6</td>
        </tr>
      </tbody>
    </table>
  );
};

export default Table;

В данном примере мы создали компонент Table, который возвращает таблицу с двумя строками и тремя столбцами. thead используется для заголовка таблицы, а tbody для тела таблицы. Заголовок таблицы содержит три заголовочные ячейки (th), а тело таблицы содержит две строки (tr) с тремя ячейками (td) в каждой.

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

0 0
Познакомьтесь с основами JavaScript бесплатно

Похожие вопросы