享受编程乐的React.js 分页器

一、何为React.js的分页器?

在React.js应用程序中，Pagination组件经常用于处理大量数据，它将信息分隔成较小的、更易于管理的块，使得用户能够轻松地浏览和获取信息。React.js的Pagination组件通常以数字列表的形式显示，允许用户选择要查看的数据页。分页组件可以与其他组件结合使用，如表格或列表，以提供用户友好的数据导航功能。

二、搭建自定义的Pagination组件

1. 创建React项目并安装必要的依赖项

2. 创建一个名为"Pagination.js"的新文件，并添加以下代码：

import React, { useState } from "react";
import { Button } from "antd";

const Pagination = ({ totalPages, currentPage, onPageChange }) => {
  const [pageNumber, setPageNumber] = useState(currentPage);

  const handlePageChange = (page) => {
    setPageNumber(page);
    onPageChange(page);
  };

  return (
    <div>
      {totalPages <= 9 ? (
        <>
          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
            <Button key={page} onClick={() => handlePageChange(page)}>
              {page}
            </Button>
          ))}
        </>
      ) : (
        <>
          {pageNumber <= 5 ? (
            <>
              {Array.from({ length: 7 }, (_, i) => i + 1).map((page) => (
                <Button key={page} onClick={() => handlePageChange(page)}>
                  {page}
                </Button>
              ))}
              <Button onClick={() => handlePageChange(totalPages)}>...</Button>
            </>
          ) : (
            <>
              <Button onClick={() => handlePageChange(1)}>...</Button>
              {Array.from({ length: 5 }, (_, i) => pageNumber - 2 + i).map((page) => (
                <Button key={page} onClick={() => handlePageChange(page)}>
                  {page}
                </Button>
              ))}
              <Button onClick={() => handlePageChange(totalPages)}>...</Button>
            </>
          )}
        </>
      )}
    </div>
  );
};

export default Pagination;

3. 将此组件导入您的应用并使用它：

import Pagination from "./Pagination";

const App = () => {
  const [currentPage, setCurrentPage] = useState(1);

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

  return (
    <div>
      <h1>Pagination</h1>
      <Pagination
        totalPages={10}
        currentPage={currentPage}
        onPageChange={handlePageChange}
      />
    </div>
  );
};

export default App;

现在，您已经创建了一个自定义的React.js分页组件，您可以根据需要对其进行调整和扩展，以满足您的应用程序需求。希望这个教程对您有所帮助！