Динамическая таблица React с примитивными данными

Введение

В этом практическом занятии мы изучим, как использовать React для динамического отображения таблицы с строками, созданными из массива примитивных типов. В частности, мы будем использовать метод Array.prototype.map(), чтобы сопоставить каждый элемент в массиве данных с элементом <tr> с соответствующим ключом и отобразить его в таблице с двумя столбцами: ID и Value. В конце этого практического занятия вы получите более глубокое понимание того, как использовать React для создания динамических и отзывчивых таблиц.

Таблица данных

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно добавлять код только в script.js и style.css.

Создайте элемент таблицы с двумя столбцами: ID и Value, где каждая строка генерируется динамически из массива примитивных значений.

Для этого используйте метод Array.prototype.map(), чтобы создать новый массив элементов JSX, представляющих каждый элемент в входном массиве data, в виде элемента <tr> с соответствующим ключом. Внутри каждого <tr> добавьте два элемента <td> для отображения индекса и значения строки соответственно.

Вот пример реализации:

const DataTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={`${i}_${val}`}>
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Для использования этого компонента с массивом имен людей, например, вы можете вызвать его следующим образом:

const people = ["John", "Jesse"];
ReactDOM.createRoot(document.getElementById("root")).render(
  <DataTable data={people} />
);

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по таблицам данных. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.