React-Hooks: как создать повторно используемый компонент таблицы данных?

В моем приложении мне нужно повторно использовать компонент таблицы данных. Где я могу изменить заголовок и тело таблицы с динамическим содержимым.

 <table className = "table table-hover">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Image</th>
                        <th>Title</th>
                        <th>Publish Date</th>
                    </tr>
                </thead>
                <tbody>
                    {data &&
                        data.map(item => (
                            <tr key = {item.id}>
                                <td>{item.id}</td>
                                <td>{item.image}</td>
                                <td>{item.title}</td>
                                <td>{item.publishDate}</td>
                            </tr>
                        ))}
                </tbody>
            </table>

reactjs datatable react-hooks react-component

21.12.2020 06:58

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Что такое компоненты React? Введение в компоненты | Типы компонентов

Компонент - это независимый, многократно используемый фрагмент кода, который делит пользовательский интерфейс на более мелкие части. Например, если мы...

Введение в одну из самых важных концепций в React - функциональное программирование.

React разработан с использованием концепции функционального программирования, поэтому понимание функционального программирования важно для изучения...

Руководство спасателя React по созданию масштабируемых приложений

А, React. Это одна из самых популярных библиотек JavaScript. Ее любят за гибкость, простоту использования и, будем честны, за то, что она позволяет...

447

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это может помочь

const CustomTable = ({header, posts}) => {
    return (
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>{header.image}</th>
                    <th>{header.title}</th>
                    <th>{header.publishedDate}</th>
                </tr>
            </thead>
            <tbody>
                {posts &&
                    posts.map(item => (
                        <tr key = {item.id}>
                            <td>{item.id}</td>
                            <td>{item.image}</td>
                            <td>{item.title}</td>
                            <td>{item.publishDate}</td>
                        </tr>
                    ))}
            </tbody>
        </table>
    );
}

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

<div className='table'>
    <CustomTable header = {header} posts = {posts} />
</div>

21.12.2020 07:05

Ответ принят как подходящий

Посмотрите, работает ли это! https://stackblitz.com/edit/react-ie2rt6

import React from "react";

const Table = ({ headers, data }) => {
  return (
    <div>
      <table>
        <thead>
          <tr>
            {headers.map(head => (
              <th>{head}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <tr>
              {headers.map(head => (
                <td>{row[head]}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

Как передать данные из разных API в тело таблицы. В stackblitz.com/edit/react-ie2rt6

— 21.12.2020 09:03

21.12.2020 07:09