react 实现一个只有五个页码和控制每页显示数量的分页器

以下是一个基于 React 实现的五个页码和控制每页显示数量的分页器示例：

import React, { useState } from "react";

const Pagination = ({ itemsPerPage, totalItems, paginate }) => {
  const [activePage, setActivePage] = useState(1);
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
    pageNumbers.push(i);
  }

  const handlePageChange = (pageNumber) => {
    setActivePage(pageNumber);
    paginate(pageNumber);
  };

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map((number) => (
          <li key={number} className="page-item">
            <a
              href="#"
              className={`page-link ${activePage === number ? "active" : ""}`}
              onClick={() => handlePageChange(number)}
            >
              {number}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Pagination;

在这个分页器组件中，我们接收三个 props：`itemsPerPage`（每页显示的项目数量），`totalItems`（总项目数量）和`paginate`（分页回调函数）。基于这些信息，我们可以计算出总页数，并将其呈现为页码列表。

我们还使用 `useState` hook 来跟踪当前选中的页码。每当用户点击页面上的页码时，我们将更新 `activePage` 状态和调用 `paginate` 回调函数来更新列表内容。最后，我们使用 `className` 属性来动态设置当前选中页码的样式。

你可以像下面这样在应用程序中使用这个分页器组件：

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

const App = () => {
  const [items, setItems] = useState(Array.from({ length: 50 }).map((_, i) => i + 1));
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);

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

  const handleItemsPerPageChange = (e) => {
    setItemsPerPage(parseInt(e.target.value));
    setCurrentPage(1);
  };

  return (
    <div className="container">
      <h1>My App</h1>
      <ul>
        {currentItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <Pagination itemsPerPage={itemsPerPage} totalItems={items.length} paginate={paginate} />
      <div>
        <label htmlFor="items-per-page">Items per page:</label>
        <select id="items-per-page" value={itemsPerPage} onChange={handleItemsPerPageChange}>
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
        </select>
      </div>
    </div>
  );
};

export default App;

在这个示例中，我们使用 `useState` hook 来跟踪当前显示的项目、当前页码和每页显示的项目数量。我们还计算出当前页码应该显示的项目，并将它们呈现为无序列表。

我们将 `paginate` 回调函数传递给 `Pagination` 组件，以便在用户单击页码时更新当前页码和显示的项目。我们还提供了一个下拉菜单来允许用户选择每页显示的项目数量，并将其传递给 `Pagination` 组件以更新分页器的行为。

这个示例演示了如何使用 React 创建一个简单的分页器，但还有很多可以改进和定制的东西。你可以使用这个示例作为起点，根据你的需求进行修改和扩展。