如何在 ReactJS 中显示分页？

在 ReactJS 中，可以使用不同的技术和库来实现分页功能。下面将介绍一种常见的实现方法，使用 react-paginate 库。

安装

首先需要安装 react-paginate 库。可以使用 npm 或者 yarn 进行安装：

npm install react-paginate

# 或者

yarn add react-paginate

使用

在 React 组件中，首先需要导入 react-paginate：

import React, { useState } from 'react';
import ReactPaginate from 'react-paginate';

然后，在组件中定义一个状态来追踪当前的页码：

const [currentPage, setCurrentPage] = useState(0);

接下来，需要定义一个处理页码变化的回调函数：

const handlePageChange = ({ selected: selectedPage }) => {
  setCurrentPage(selectedPage);
};

在组件的 JSX 中，添加一个 ReactPaginate 组件来显示分页：

<ReactPaginate
  previousLabel={'上一页'}
  nextLabel={'下一页'}
  breakLabel={'...'}
  pageCount={totalPages}
  marginPagesDisplayed={2}
  pageRangeDisplayed={5}
  onPageChange={handlePageChange}
  containerClassName={'pagination'}
  activeClassName={'active'}
/>

注意：上述代码中的 totalPages 需要替换为实际的总页数。

通过上述代码，就可以在 React 组件中实现分页功能了。根据 currentPage 和 totalPages 可以在获取数据或渲染列表时进行对应的操作。

以上就是在 ReactJS 中显示分页的简单介绍。使用 react-paginate 库可以方便地实现分页功能，同时可以根据实际需求进行自定义样式和行为。更多关于 react-paginate 的配置选项和用法，可以查阅官方文档。