如何在 Reactjs 中实现分页
分页是一种将大型数据集拆分成易于管理的部分或页面的技术。在处理列表、表格或搜索结果时，分页是确保流畅用户体验的关键组成部分。通过将内容分成多个页面并提供导航控件，用户可以更有效地访问信息，而不会感到不知所措。
为什么要使用分页？
本文将指导您如何在 ReactJS 应用中实现分页功能。通过引入分页，您可以显著提升用户体验，加快页面加载速度，并简化 Web 应用或网站内的导航。本教程假设您已熟悉 JavaScript 和 ReactJS，因此适合不同技能水平的开发者。
入门
在开始创建分页之前，请确保您已搭建好 ReactJS 应用。如果您是从零开始，可以使用以下命令创建一个新应用：
yarn create vite
服务器运行后，目录结构应与下图所示类似。
project-root/
├── src/
│ ├── App.jsx
│ ├── components/
│ ├── ...
实现分页逻辑
我们将首先关注目录App.jsx中的文件src。核心分页逻辑将在这里实现。以下是关键步骤：
-
数据存储：利用
useState钩子函数存储从服务器获取的数据。使用空数组初始化状态。 -
加载指示器：设置一个
loading状态，以便在获取数据时通知用户。将其初始化为false。 -
当前页面管理：创建一个
currentPage状态来跟踪当前显示的页面。如果您正在处理 100 个项目，并希望每页显示 10 个，请使用以下方式初始化此状态1： -
每页显示帖子数：实现一个状态来管理每页显示的帖子数。本文中，我们将以每页显示 10 篇帖子为例进行说明。
以下片段说明了这些状态：
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage, setPostsPerPage] = useState(10);
从服务器获取数据
为了模拟数据获取过程，我们将使用jsonplaceholder.typicode.com提供的虚拟 API 。以下是数据获取过程的操作方法：
-
使用 UseEffect 从 API 获取数据：创建一个
useEffect用于从 API 获取数据的组件。这确保在组件挂载时获取数据。 -
获取函数：在内部
useEffect，实现一个async使用fetch从 API 端点检索数据的函数。 -
更新状态：将状态设置
posts为获取到的数据。请务必妥善处理状态加载。
以下是展示此过程的片段：
useEffect(() => {
const fetchPosts = async () => {
setLoading(true);
try {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const data = await response.json();
setPosts(data);
setLoading(false);
} catch (error) {
console.log(error);
}
};
fetchPosts();
}, []);
显示分页数据
为了显示分页数据，我们将创建一个Post组件。该组件将接收posts数组和loading状态作为 props。以下是组件的结构Post：
import React from 'react';
const Post = ({ posts, loading }) => {
if (loading) {
return <h1>Loading...</h1>;
}
return (
<>
{posts.map((data, index) => (
<div className='list' key={index}>
<p>{data.title}</p>
</div>
))}
</>
);
};
export default Post;
为了让它看起来更吸引人，我为这篇文章使用了一个简单的 CSS 文件。
body {
background: black;
color: white;
}
.container {
width: 100%;
max-width: 800px;
margin: auto;
}
.list {
border: 1px solid #fff;
padding: 5px;
}
.pagination {
display: flex;
border: 1px solid #fff;
justify-content: space-between;
padding: 20px;
}
.pagination button {
padding: 10px;
}
.active {
background: black;
color: #fff;
border: 1px solid #fff;
}
实现分页组件
为了控制页面导航，我们来创建一个Pagination组件。该组件将根据数据长度和每页文章数量计算页面总数。以下是具体步骤：
-
计算页数：使用循环，根据数据长度和每页帖子数确定所需的页数。
-
渲染页码：渲染带有页码的导航按钮。我们将使用该
map函数为每个页面创建按钮。
以下是该组件的简化版本Pagination：
import React from 'react';
const Pagination = ({ postsPerPage, length }) => {
const paginationNumbers = [];
for (let i = 1; i <= Math.ceil(length / postsPerPage); i++) {
paginationNumbers.push(i);
}
return (
<div className='pagination'>
{paginationNumbers.map((pageNumber) => (
<button key={pageNumber}>{pageNumber}</button>
))}
</div>
);
};
export default Pagination;
处理页面变更
为了实现动态分页，我们需要一种方法来处理页面变化。这涉及到更新currentPage状态。以下是实现方法：
-
创建处理程序：定义一个函数，例如
handlePagination，在你的App.jsx代码中更新currentPage状态。 -
传递处理程序：将函数作为 prop传递
handlePagination给组件。Pagination -
使用处理程序：在组件内部
Pagination，onClick为每个页面按钮实现事件。调用该handlePagination函数并传入相应的页码。
const handlePagination = (pageNumber) => {
setCurrentPage(pageNumber);
};
// Inside your component's return...
<Pagination
length={posts.length}
postsPerPage={postsPerPage}
handlePagination={handlePagination}
/>
高亮显示当前页面
为了提升用户体验，请高亮显示当前活动页面。为此，请为活动页面的按钮添加一个动态类。方法如下：
- 条件类：
Pagination在组件的函数内部map，有条件地将类应用于活动页面的按钮。
{paginationNumbers.map((pageNumber) => (
<button
key={pageNumber}
className={currentPage === pageNumber ? 'active' : ''}
>
{pageNumber}
</button>
))}
结论
恭喜！您已成功在 ReactJS 应用中实现分页功能。通过将数据拆分成易于管理的小块并提供直观的导航控件，您提升了用户体验和应用性能。您可以进一步探索自定义选项，并尝试不同的设计，从而为用户打造更具吸引力的界面。本文中使用的源代码链接在此。
反馈与互动
如果您觉得这篇文章对您有所帮助，或者有任何反馈意见，欢迎与我联系！您可以在社交媒体上与我互动，分享您的想法：
- Twitter：@CanHamzaCode
- Facebook：@Hamzat Abdul-muizz
- Instagram：@CanHamzaCode
祝您编程愉快！
文章来源：https://dev.to/canhamzacode/how-to-implement-pagination-with-reactjs-2b04