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

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>
  );
};