介绍
在前端开发中，分页功能是非常常见的需求。react-paginate 包是实现分页功能的一个帮助类，它提供了一系列易于使用的 API ，同时也有很好的扩展性。本篇文章将介绍如何使用 react-paginate 包实现分页功能。
安装
使用 npm 安装 react-paginate：
npm install react-paginate --save
基础使用
在使用 react-paginate 之前，需要先导入它：
import ReactPaginate from 'react-paginate';
接下来，需要创建一个组件来展示分页组件。在这个组件中，渲染一个 ReactPaginate 实例即可。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------- ---- -----------------
-------- ----------------- -
----- ------------- --------------- - ------------
----- --------------- - ------ -- -
----- - -------- - - -----
-------------------------
--
------ -
--------------
--------------------------
------------------
------------------
--------------
------------------------
----------------------
------------------------------
---------------------------------
--------------------------
--
--
-
------ ------- -----------在这个例子中，我们使用了 useState 钩子来维护当前页码。使用开发者提供的回调函数 onPageChange 来处理页码改变的事件。这个回调函数会接受一个数据对象，其中的 selected 字段就是当前页码。
API
react-paginate API 提供了多个配置选项可以供使用者灵活调整。
previousLabel
这是指前一页的标签，例如，可以将它设置为一个显示为 "<" 的按钮。默认值为 "previous"。
nextLabel
这是指下一页的标签。例如，可以将它设置为一个显示为 ">" 的按钮。默认值为 "next"。
breakLabel
这设置省略号的标签。默认值为 "..."。当页面显示超出页面范围时，react-paginate 会自动将多余的页码用省略号代替。可以通过这个选项来调整省略号的标签。
pageCount
这是指总共有多少页。在开发中，这个值可能是计算出来的，也可能需要通过后端 API 来获取。在 react-paginate 中，可以通过设置这个选项来设置分页总数。
marginPagesDisplayed
这个选项用来决定当每个边缘处有多少页面需要显示。也就是说，如果，marginPagesDisplayed 为 2，则会在开始和结束处的分页插件中显示 2 个页面。同时，开始和结束的边界页与省略号之间也会显示2页。
pageRangeDisplayed
这个选项用来决定每个分页组件中间需要展示多少个页面。例如，如果 pageRangeDisplayed 为 5，则每一个页面的左右两边将会展示 5 页。
onPageChange
这个 API 可以传递一个函数和参数来处理分页改变的事件。当组件的页码被改变的时候，onPageChange 中的函数会被执行。
containerClassName
这个选项可以用来指定用于分页组件的 CSS 类
activeClassName
这个选项则是用来设置哪一个 CSS 类应该被应用到活动的页码。默认为 "active"。
示例代码
下面是一个完整的使用 react-paginate 实现分页的代码示例。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------- ---- -----------------
-------- ----------------- -
----- ------------- --------------- - ------------
----- --------------- - ------ -- -
----- - -------- - - -----
-------------------------
--
----- --------- - --------------------- - ---------------
------ -
--------------
--------------------------
------------------
------------------
---------------------
------------------------
----------------------
------------------------------
---------------------------------
--------------------------
--
--
-
------ ------- -----------在这里使用了 props.total 和 props.perPage 计算出总页码数，最终将数量传递给 pageCount。组件也可以使用其他数据源，例如在后端 API 中获取数据来计算总页码数。
结论
react-paginate 是一个易于使用、灵活性强的 react 分页组件。使用者可以根据自己的需求进行配置，并且 react-paginate 还支持扩展来满足更丰富的需求。希望在实际开发中，这个包可以让你的分页功能变得更容易实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67527