React-Paginate

2025年3月17日 | 阅读 7 分钟

Reactjs 分页库将直接用于任何项目列表的分页功能。这里所需的 props 是要渲染的项目列表数组以及一个 onChange 回调函数，该函数会将页面更改通知父组件。

但分页很重要，通过过滤和显示相关数据，例如，谷歌搜索引擎。

因此，当用户搜索某些信息而不消费随机信息时，Reactjs 分页就变得至关重要。

一些内置库用于处理 Web 开发中的分页，在 React 的情况下。您可以直接使用许多资源来处理应用程序中的分页。

一些可用的 NPM 和其他分页库是

react-js-paginate
react-paginate
react-boot/paginate

与其重写自己的代码，不如使用这些现有的库是理想的选择，因为无需重复造轮子；相反，您可以专注于其他事情。

但同时，了解幕后发生的事情对于构建和定制应用程序以满足您的需求而不影响任何要求非常重要。

不同的 reactjs 分页包也可能使用不同的逻辑。要在您的应用程序中实现 react 分页，请阅读这篇优秀的 react-jw-pagination 文章。

这里我们只谈 react-paginate（第二个）

一个用于渲染分页的 ReactJS 组件。

通过安装该组件并编写少量 CSS，您可以获得这个：注意：您必须编写自己的 CSS 才能获得此 UI。此包不提供任何 CSS。

或

安装

Install the react page with npm:
npm install react-page --save
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactPaginate from 'react-paginate';
// Example to simulate obtaining the resources.
constant elements = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

Function elements ({current elements}) {
      return (
        <>
          {current items &&
            currentelements.map((element) => (            <div>
              <h3>Article #{article}</h3>
            </div>
          ))}
      </>
    );
}function Paginated Items ({ items per page }) {
  // We start with an empty list of elements.
  const [currentitems, setcurrentitems] = useState(null);
    const [pageCount, setPageCount] = useState(0);
    // element offsets; we also use as page scrolls
    // API we are working with.
    const [element offset, set Element Offset] = usestate(0);

    useEffect(() => {    // Get the items of other resources.
    const endOffset = itemOffset + itemsPerPage;
    console.log(`Loading items from ${itemOffset} to ${endOffset}`);
    setCurrentItems(items.slice(itemOffset, endOffset));
    setPageCount(Math.ceil(items.length / itemsPerPage));
  }, [element offset, elements per page]);

  // Call user clicks to request another page.
  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % items.length;
    console.log(
      `User requested page number ${event.selected}, offset by ${newOffset}`
    );
    setItemOffset(newOffset);
  };
  return (
    <>
      <articles current articles={current articles} />
      <ReactPaginate
        breakLabel="..."
        nextLabel="next >"
        onPageChange={handlePageClick}
        Displayed Page Range = {5}
        pageCount={pageCount}
        previousLabel="< previous"
        renderOnZeroPageCount={null}
      />
    </>
  );
}
// Add a <div id="container"> to HTML to see the component.
ReactDOM.render(
  <Items Paginated itemsPerPage={4} />,
  document.getElementById('container')
);

在 Code Pen 上尝试一下。

您可以阅读 demo/js/demo.js 中的代码来理解如何实现列表对象的响应式分页。

最后，CodePen 演示介绍了获取示例代码（GitHub API）和两个同步的分页小部件。

Props

名称	类型	描述
pageCount	数字	所需页面的总数。
PageRank displayed	数字	显示的页面范围。
marginPagesDisplayed	数字	在页边距中显示的页面数量。
previousLabel	节点	主要用于上一页按钮的标签。
nextLabel	节点	用于下一页按钮的标签。
breakLabel	节点	主要用于省略号的标签。
breakClassName	String	省略号元素的 li 标签中的类名。
breakLinkClassName	String	省略号元素的 a 标签中的类名。
onPageChange	函数	用于在页面更改时调用，并将页面对象作为参数公开。
onClick	函数	用于点击组件的回调。公开有关点击的信息（例如，next 代表下一个控件），预期的下一页，nextSelectedPage 等。它会阻止页面更改或数字再次覆盖页面。
onPageActive	函数	如果单击了任何活动页面，则用于调用。它将活动页面对象作为参数公开。
initialPage	数字	在非受控模式下选择的初始页面。不要使用 forcePage。
forcePage	数字	使用主 prop 覆盖选定的页面。如果您想从应用程序状态控制页面，请使用它。
disableInitialCallback	boolean	它会禁用带有初始页面的 onPageChange 回调。默认值：false
containerClassName	String	这是分页容器的类名。
className	String	它与 containerClassName 相同。它与 styled-components 和其他 CSS-in-JS 一起使用。
pageClassName	String	每个页面元素的 li 标签中的类名。
pageLinkClassName	String	每个页面元素 a 标签中的类名。
pageLabelBuilder	函数	这是一个用于设置页面上的文本链接的函数。默认为 (page) = page
activeClassName	String	活动页面的类名。
activeLinkClassName	String	活动 a 标签中的类名。
previousClassName	String	上一页按钮 li 标签中的类名。
nextClassName	String	下一页按钮 li 标签中的类名。
previousLinkClassName	String	上一页按钮 a 标签中的类名。
nextLinkClassName	String	下一页按钮 a 标签中的类名。
disabledClassName	String	用于禁用上一页和下一页按钮。
disabledLinkClassName	String	用于禁用上一页或下一页按钮的 a 标签中的类名。
hrefBuilder	函数	该方法用于生成页面上元素的 a 标签的属性值。
hrefAllControls	Bool	hrefBuilder 默认会添加 hrefs 作为活动控件。将其属性设置为 true，以便为所有控件生成 hrefs。
extraAriaContext	String	在 HTML 属性中添加 aria-label 的附加上下文。
ariaLabelBuilder	函数	调用它来生成 aria-label 属性的值。
eventListener	String	在更改选定页面之前用于监听的事件。默认值是 onClick。
renderOnZeroPageCount	函数	当 pageCount 为零时调用的渲染函数。默认显示下一页按钮。如果提供 null 值，则不显示任何内容。
prevRel	String	上一页控件 a 标签中的实际属性。默认值为 prev。设置为 null 以禁用。
nextRel	String	下一页控件的实际属性。默认值为 Next。
prevPageRel	String	选定页面之前的 a 标签中的实际属性。默认值为 prev。设置为 null 以禁用。
selectedPageRel	String	选定页面 a 标签中的实际属性。默认值为 canonical。设置为 null 以禁用。
nextPageRel	String	选定页面之后的 a 标签中的实际属性。默认值为 next。设置为 null 以禁用。

演示

克隆存储库并轻松访问以运行演示

git clone git@github.com:AdeleD/react-paginate.git
cd react-page

安装依赖项

准备演示

运行服务器

打开浏览器并转到 https://:3000/.

这里我们通过使用 react-paginate 在 React 应用程序中实现分页元素。

让我们开始吧

将 react-paginate 添加并安装为应用程序中的依赖项。

状态定义

currentPage 是用户选择的页面的索引，您可能希望将其设置为 0，即第一页。

Data 包含所有数据元素。它是空的，我们在获取数据后填充它。

const [CurrentPage, setCurrentPage] = useState(0);
const [data, setData] = useState([]);
Getting the data
useEffect(() => {
    get information();
  }, []); function fetchdata() {
    search("https://ihsavru.me/Demo/uploads.json")
      .then((res) => res.json())
      .then((data) => {
        constant {
          course: {loads}
        } = data;
        setData(loads);
      });
  }

在这里，我们创建了一个带有空依赖数组的 useEffect 钩子，它充当 DidMount 组件的生命周期方法，负责获取数据并更新数据状态。

表示当前页面的数据计算。

我们先定义一些常量

const PER_PAGE = 10; const offset = current page * BY_PAGE; const current page data = data
    .slice(offset, offset + BY_PAGE)
    .map(({ thumburl }) => <img src={thumburl} />);const pageCount = Math.ceil(data.length / PER_PAGE);

PER_PAGE 常量包含每页要显示的项目数，offset 是已在上一页显示的项目数。

如果当前页是两（或第三页，索引从 0 开始），则 offset 变为 20。这意味着第一个 20 个元素已被渲染，我们将从 20 之后的下一个元素开始渲染（第一页显示了前十项，第二页显示了下一项 10）。第三页将渲染项目 20 到 20 + BY_PAGE，30。

此 offset 用于设置当前页面的元素，即当前页面的数据，它通过 split data 映射到图像数组。

我们来渲染组件

return (
    <div className="Application">
      <h1>React pagination example</h1>
      <ReactPaginate
        previousLabel={"? Previous"}
        nextLabel={"Next ?"}
        pageCount={pageCount}
        onPageChange={handlePageClick}
        containerClassName={"paging"}
        previouslinkClassName={"paging__link"}
        nextLinkClassName={"paging__link"}
        disabledClassName={"paging__link--disabled"}
        activeClassName={"paging__link--active"}
      />
      {current page data}
    </div>
  );

您可以参考此以查看传递给 ReactPaginate 的不同类型的 props。

当在这里单击一个新页面时，handlePageClick 事件处理程序函数会设置当前页面。

function handlePageClick ({selected: selectedpage}) {
      setCurrentPage(selectedpage);
}

样式化分页元素

最好使用 nextLinkClassName、previousLinkClassName、disabledClassName 和 activeClassName 等 prop 来为分页链接添加类，以自定义页面样式。

下一个主题React 的 useState 是什么

React-Paginate

安装

Props

演示

状态定义

样式化分页元素

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React-Paginate

安装

Props

演示

状态定义

样式化分页元素

相关帖子

React 多选框

React Google 登录

React vs. Svelte

在 React JS 中循环数组

1401 React JS 和 Font Awesome

React 中什么是 Dom

React-icons

React 基础知识

React JS 中的类组件

React.js vs Node.js

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器