react 封装自定义分页

React 封装自定义分页需要以下几个步骤：

1. 创建一个 Pagination 组件，该组件接收以下 props：

- currentPage：当前页码
- totalPages：总页数
- onChange：页码改变回调函数

2. 在 Pagination 组件内部，通过计算得到页码列表，例如显示当前页码前后各 3 页，可以使用一个循环来生成页码列表数组。

3. 在 JSX 中渲染页码列表，并添加页码点击事件，当点击页码时，调用 onChange 回调函数，并将点击的页码传递给它。

4. 在父组件中使用 Pagination 组件，并在 onChange 回调函数中更新当前页码，例如使用 useState Hook 来保存当前页码，并在 useEffect Hook 中监听 currentPage 的变化，当 currentPage 改变时重新请求数据。

5. 在请求数据时，需要将当前页码传递给后端，例如将 currentPage 作为查询参数发送给后端 API。

下面是一个简单的 Pagination 组件实现示例：

import React, { useState, useEffect } from 'react';

function Pagination({ currentPage, totalPages, onChange }) {
  const [pageList, setPageList] = useState([]);

  useEffect(() => {
    const list = [];
    const maxPages = Math.min(totalPages, currentPage + 3);
    const minPages = Math.max(1, currentPage - 3);
    for (let i = minPages; i <= maxPages; i++) {
      list.push(i);
    }
    setPageList(list);
  }, [currentPage, totalPages]);

  const handleClick = (page) => {
    if (onChange) {
      onChange(page);
    }
  };

  return (
    <div className="pagination">
      <button disabled={currentPage === 1} onClick={() => handleClick(currentPage - 1)}>Prev</button>
      {pageList.map((page) => (
        <button key={page} className={page === currentPage ? 'active' : ''} onClick={() => handleClick(page)}>{page}</button>
      ))}
      <button disabled={currentPage === totalPages} onClick={() => handleClick(currentPage + 1)}>Next</button>
    </div>
  );
}

export default Pagination;

在父组件中使用 Pagination 组件：

import React, { useState, useEffect } from 'react';
import Pagination from './Pagination';

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, [currentPage]);

  const fetchData = async () => {
    const response = await fetch(`/api/data?page=${currentPage}`);
    const result = await response.json();
    setData(result.data);
    setTotalPages(result.totalPages);
  };

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
      <Pagination currentPage={currentPage} totalPages={totalPages} onChange={handlePageChange} />
    </div>
  );
}

export default App;