还需要隐藏多的页数，并且有上一页，下一页按钮

如果您想隐藏过多的页数，并在分页中添加上一页和下一页按钮，您可以对翻页组件进行适当的修改。以下是一个示例代码，演示如何实现这些功能：

import React from 'react';

export default function Pagination({ currentPage, totalPages, onPageChange }) {
  const handlePrevClick = () => {
    if (currentPage > 1) {
      onPageChange(currentPage - 1);
    }
  };

  const handleNextClick = () => {
    if (currentPage < totalPages) {
      onPageChange(currentPage + 1);
    }
  };

  const renderPageNumbers = () => {
    const visiblePages = [];
    const pageLimit = 5; // 每次最多显示的页数
    const startPage = Math.max(1, currentPage - Math.floor(pageLimit / 2));
    const endPage = Math.min(totalPages, startPage + pageLimit - 1);

    for (let i = startPage; i <= endPage; i++) {
      visiblePages.push(
        <li key={i} className={`page-item ${i === currentPage ? 'active' : ''}`}>
          <button className="page-link" onClick={() => onPageChange(i)}>
            {i}
          </button>
        </li>
      );
    }

    return visiblePages;
  };

  return (
    <nav>
      <ul className="pagination">
        <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
          <button className="page-link" onClick={handlePrevClick}>
            Previous
          </button>
        </li>

        {renderPageNumbers()}

        <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
          <button className="page-link" onClick={handleNextClick}>
            Next
          </button>
        </li>
      </ul>
    </nav>
  );
}

在上述代码中，我们添加了一个 `renderPageNumbers` 函数，该函数根据当前页数和总页数计算出要显示的页码范围，并生成相应的页码按钮。我们使用 `pageLimit` 变量来限制每次最多显示的页数，并根据当前页数偏移来确定开始和结束页码。然后，我们在 `renderPageNumbers` 函数中循环生成页码按钮，并根据当前页数设置活动状态。

希望这个示例能满足您的需求，并帮助您实现隐藏多余的页数和添加上一页、下一页按钮的分页功能。如有任何问题，请随时向我提问！