react 实现一个只有五个页码和pageSize的分页器

以下是一个只有五个页码和pageSize的分页器的React组件实现：

import React, { useState } from 'react';

const Pagination = ({ totalItems, pageSize }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = Math.ceil(totalItems / pageSize);

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

  const getPageNumbers = () => {
    const pageNumbers = [];
    const maxPageNumbers = 5;
    const middlePage = Math.ceil(maxPageNumbers / 2);
    let startPage = currentPage - middlePage + 1;
    if (startPage < 1) {
      startPage = 1;
    }
    let endPage = startPage + maxPageNumbers - 1;
    if (endPage > totalPages) {
      endPage = totalPages;
    }
    for (let i = startPage; i <= endPage; i++) {
      pageNumbers.push(i);
    }
    return pageNumbers;
  };

  return (
    <nav aria-label="Pagination">
      <ul className="pagination">
        <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
          <button className="page-link" onClick={() => handlePageClick(currentPage - 1)}>&laquo;</button>
        </li>
        {getPageNumbers().map(pageNumber => (
          <li key={pageNumber} className={`page-item ${currentPage === pageNumber ? 'active' : ''}`}>
            <button className="page-link" onClick={() => handlePageClick(pageNumber)}>{pageNumber}</button>
          </li>
        ))}
        <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
          <button className="page-link" onClick={() => handlePageClick(currentPage + 1)}>&raquo;</button>
        </li>
      </ul>
    </nav>
  );
};

export default Pagination;

这个组件接收两个props：`totalItems`和`pageSize`。`totalItems`表示所有项的总数，`pageSize`表示每页显示的项数。组件内部使用`useState`来跟踪当前页码。`totalPages`计算出总页数。`handlePageClick`是一个处理页码点击事件的函数，它接收一个页码作为参数，并将当前页码更新为该页码。`getPageNumbers`是一个用来计算可见页码的函数。它使用`currentPage`和`totalPages`来计算出可见页码的范围，并返回一个数组。组件渲染一个`<nav>`元素和一个`<ul>`元素，其中包含所有可见页码的`<li>`元素和前一页和后一页的按钮。`<li>`元素的`className`属性根据当前页码和按钮类型设置。`<button>`元素的`onClick`属性调用`handlePageClick`函数。