使

使用 React Paginate 在 React 中构建分页功能简介安装库 App.js CSS CodeSandbox 结论

2025-06-07

使用 React Paginate 在 React 中构建分页

介绍

安装库

App.js

CSS

CodeSandbox

结论

介绍

分页是任何 Web 应用程序中至关重要的组件，因为它能够高效无缝地导航大量数据。在 React 中，实现分页对于开发者来说可能是一个挑战，尤其是对于刚接触该框架的开发者。然而，只要正确理解 React 组件和钩子，在 React 中构建分页功能就会变得非常简单。

在本文中，我们将探讨在 React 中构建分页系统的步骤，从设置组件结构到将其与应用程序数据集成。本指南将全面概述该过程，并为您提供构建高效且用户友好的分页系统所需的知识和技能。

我们将在文章中探讨以下主题：

  • 安装组件
  • 理解react-paginate带有 props 的库
  • 不同页面的数据过滤
  • 分页
  • 结论

现在，让我们开始吧。

安装库

我们将使用react-paginate库来构建分页功能。您可以使用以下命令安装该库：

npm i react-paginate
Enter fullscreen mode Exit fullscreen mode

除此之外，我们还需要一些图标。对于图标，我使用了react-icons库。使用以下命令安装它：

npm install react-icons --save
Enter fullscreen mode Exit fullscreen mode

App.js

我们正在构建一个包含数组数据的应用程序。我们只需要在每个页面上显示 3 条数据（可以根据需求进行更改）。

让我们开始逐一构建它们。

导入

以下是我们组件所需的导入。

import ReactPaginate from "react-paginate"; // for pagination
import { AiFillLeftCircle, AiFillRightCircle } from "react-icons/ai"; // icons form react-icons
import { IconContext } from "react-icons"; // for customizing icons
import { useEffect, useState } from "react"; // useState for storing data and useEffect for changing data on click 
import "./styles.css"; // stylesheet
Enter fullscreen mode Exit fullscreen mode

您可以查看每个导入的注释。

数据

数据很简单，它是数组中的字母表的字母。

const data = [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" ];
Enter fullscreen mode Exit fullscreen mode

useEffect 和 useState

以下是我们的应用程序的状态。

const [page, setPage] = useState(0);
const [filterData, setFilterData] = useState();
const n = 3
Enter fullscreen mode Exit fullscreen mode

page：用于存储分页组件的当前页码

datafilterData：是每页过滤后显示的数据。

n：一页上显示的最大项目数。

以下是我们用来过滤数据的钩子代码useEffect。当用户切换到其他页面时，数据会被过滤。每个页面上都会显示过滤后的数据。

useEffect(() => {
  setFilterData(
    data.filter((item, index) => {
      return (index >= page * n) & (index < (page + 1) * n);
    })
  );
}, [page]);
Enter fullscreen mode Exit fullscreen mode

data返回公式将返回数组中索引为 3 的倍数的项目。

返回

在返回语句的顶部，我们显示filterData。

<ul>
{filterData && filterData.map((item, index) => <li>Item #{item}</li>)}
</ul>;
Enter fullscreen mode Exit fullscreen mode

现在，让我们看一下ReactPaginate组件。首先，让我们看一下代码，然后我将解释每个 prop。

<ReactPaginate
  containerClassName={"pagination"}
  pageClassName={"page-item"}
  activeClassName={"active"}
  onPageChange={(event) => setPage(event.selected)}
  pageCount={Math.ceil(data.length / n)}
  breakLabel="..."
  previousLabel={
    <IconContext.Provider value={{ color: "#B8C1CC", size: "36px" }}>
      <AiFillLeftCircle />
    </IconContext.Provider>
  }
  nextLabel={
    <IconContext.Provider value={{ color: "#B8C1CC", size: "36px" }}>
      <AiFillRightCircle />
    </IconContext.Provider>
  }
/>;
Enter fullscreen mode Exit fullscreen mode
道具 描述
容器类名 您可以为分页组件的容器提供一个类名。
页面类名 它是每个页码的类别名称。
活动类名 活动页面的类名。
onPageChange 这是在切换页面时触发的函数。在这里，我们将页码存储在page状态中。页码从 0 开始，而组件中的页码从 1 开始。
页数 这是一个必需的属性。顾名思义，它会显示页数。我将数据的长度除以每页上每个项目的数量。
打破标签 当页面之间出现中断时，将显示该组件。这是为了显示中间还有更多页面。
上一个标签 这里使用图标组件来显示上一个按钮。
下一个标签 这是下一个按钮。

CSS

这是代码中使用的每个组件的 CSS。

.App {
  display: flex;
  font-family: sans-serif;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.pagination {
  list-style: none;
  height: 31.5px;
  width: 31.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  cursor: pointer;
}

.active {
  background-color: #1e50ff;
  border-radius: 50%;
}

.page-item {
  list-style: none;
  padding: 2px 12px;
  height: 31.5px;
  width: 31.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
}
Enter fullscreen mode Exit fullscreen mode

CodeSandbox

您可以在下面的 codesandbox 中查看完整的代码和项目的输出。

结论

在 React 中构建分页功能是 Web 开发的一个重要方面，它可以极大地提升用户浏览大量数据的体验。按照本文概述的步骤，您可以轻松地在 React 应用程序中实现分页功能，并为用户提供流畅高效的方式来访问所需的数据。

希望本文能帮助您理解在 React 中创建分页组件的过程。感谢您阅读本文。

文章来源：https://dev.to/documatic/building-pagination-in-react-with-react-paginate-4nol
Devto 翻译
PREV
新的 React Hooks 模式？返回一个组件
NEXT
🔥20 个最佳 AI 编码代理🧙‍♂️