如何在react js中对动态表应用分页

在React.js中对动态表应用分页，可以通过以下步骤实现：

首先，需要安装并引入一个用于分页的React组件库，例如react-paginate或react-js-pagination。可以使用npm或yarn进行安装。
在组件中引入分页组件，并在state中定义当前页码和每页显示的数据数量。

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

const MyComponent = () => {
  const [currentPage, setCurrentPage] = useState(0);
  const [perPage, setPerPage] = useState(10);

  // 其他相关代码

  return (
    <div>
      {/* 表格内容 */}
      
      {/* 分页组件 */}
      <ReactPaginate
        pageCount={totalPages} // 总页数
        pageRangeDisplayed={5} // 显示的页码数量
        marginPagesDisplayed={2} // 两侧显示的页码数量
        onPageChange={handlePageChange} // 页码改变时的回调函数
        containerClassName={'pagination'}
        activeClassName={'active'}
      />
    </div>
  );
};

实现数据的分页逻辑。根据当前页码和每页显示的数据数量，从数据源中截取相应的数据。

const MyComponent = () => {
  // ...

  const handlePageChange = (selectedPage) => {
    setCurrentPage(selectedPage.selected);
  };

  // 根据当前页码和每页显示的数据数量，截取相应的数据
  const startIndex = currentPage * perPage;
  const endIndex = startIndex + perPage;
  const paginatedData = data.slice(startIndex, endIndex);

  // ...

  return (
    <div>
      {/* 表格内容 */}
      
      {/* 分页组件 */}
      <ReactPaginate
        // ...
      />
    </div>
  );
};

将分页后的数据渲染到表格中。

const MyComponent = () => {
  // ...

  return (
    <div>
      <table>
        <thead>
          {/* 表头 */}
        </thead>
        <tbody>
          {/* 渲染分页后的数据 */}
          {paginatedData.map((item) => (
            <tr key={item.id}>
              {/* 表格行内容 */}
            </tr>
          ))}
        </tbody>
      </table>
      
      {/* 分页组件 */}
      <ReactPaginate
        // ...
      />
    </div>
  );
};

通过以上步骤，就可以在React.js中对动态表应用分页。分页组件可以根据实际需求进行自定义样式和配置。