封装一个分页的自定义hook

当然可以！下面是一个简单的分页自定义Hook的封装示例：

import { useState, useEffect } from 'react';

const usePagination = (itemsPerPage, initialPage = 1) => {
  const [currentPage, setCurrentPage] = useState(initialPage);
  const [totalPages, setTotalPages] = useState(0);

  const paginate = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  useEffect(() => {
    // 假设items是包含所有数据项的数组
    const totalItems = items.length;
    const totalPagesCount = Math.ceil(totalItems / itemsPerPage);
    setTotalPages(totalPagesCount);
  }, [items, itemsPerPage]);

  return {
    currentPage,
    totalPages,
    paginate,
  };
};

export default usePagination;

这个自定义Hook接受两个参数：`itemsPerPage`（每页显示的数据项数量）和`initialPage`（初始页码，默认为1）。它返回一个包含当前页码、总页数和页码切换函数的对象。

你可以在你的组件中使用这个自定义Hook，例如：

import React from 'react';
import usePagination from './usePagination';

const MyComponent = () => {
  const itemsPerPage = 10;
  const { currentPage, totalPages, paginate } = usePagination(itemsPerPage);

  // 假设items是包含所有数据项的数组
  const items = [...];

  // 根据当前页码和每页显示的数据项数量计算起始索引和结束索引
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;

  // 获取当前页码对应的数据项
  const currentItems = items.slice(startIndex, endIndex);

  return (
    <div>
      {/* 展示当前页码对应的数据项 */}
      {currentItems.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}

      {/* 分页导航 */}
      <ul>
        {Array.from({ length: totalPages }, (_, index) => index + 1).map(
          (pageNumber) => (
            <li
              key={pageNumber}
              onClick={() => paginate(pageNumber)}
              className={currentPage === pageNumber ? 'active' : ''}
            >
              {pageNumber}
            </li>
          )
        )}
      </ul>
    </div>
  );
};

export default MyComponent;

在这个示例中，我们使用自定义Hook来实现分页功能。根据当前页码和每页显示的数据项数量，我们计算出起始索引和结束索引，并从数据项数组中截取出当前页码对应的数据项。然后，我们展示当前页码对应的数据项，并提供分页导航，通过点击不同的页码来切换页面。

希望这个示例对你有所帮助！如果你有任何其他问题，请随时问我。