react的Table组件分页

React的Table组件分页可以通过以下步骤实现：

1. 安装分页组件库，比如react-paginate或者react-js-pagination。

2. 在Table组件中引入分页组件，并将数据分页展示。可以使用state来保存当前页码和每页展示的数据量。

3. 实现页码切换的回调函数，当用户点击页码时，更新state中的当前页码并重新渲染Table组件。

以下是一份示例代码：

import React, { useState } from 'react';
import ReactPaginate from 'react-paginate';

const Table = ({ data }) => {
  const [currentPage, setCurrentPage] = useState(0);
  const pageSize = 10; // 每页展示的数据量

  const handlePageClick = ({ selected }) => {
    setCurrentPage(selected);
  };

  const start = currentPage * pageSize;
  const end = start + pageSize;
  const currentData = data.slice(start, end);

  return (
    <>
      <table>
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
          </tr>
        </thead>
        <tbody>
          {currentData.map((item) => (
            <tr key={item.id}>
              <td>{item.column1}</td>
              <td>{item.column2}</td>
              <td>{item.column3}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <ReactPaginate
        previousLabel="previous"
        nextLabel="next"
        pageCount={Math.ceil(data.length / pageSize)}
        onPageChange={handlePageClick}
        containerClassName="pagination"
        activeClassName="active"
      />
    </>
  );
};

export default Table;

在上面的代码中，我们使用useState来保存当前页码，pageSize指定每页展示的数据量。handlePageClick函数用于更新当前页码。start和end变量用于计算当前页展示的数据范围。最后，我们使用ReactPaginate组件来展示分页按钮。previousLabel和nextLabel分别表示上一页和下一页的文字，pageCount表示总页数，onPageChange用于处理页码切换事件，containerClassName和activeClassName用于指定样式。