react 实现分页
实现分页的基本思路
在React中实现分页通常需要以下几个核心部分：当前页码状态管理、数据分片逻辑、分页控件渲染。以下是具体实现方法。
定义分页状态
使用React的useState钩子管理当前页码和每页显示数量。通常需要存储当前页码（currentPage）和每页数据量（itemsPerPage）。
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10);计算分页数据
根据当前页码和每页数据量，从完整数据中切片获取当前页的数据。假设有一个数据数组data：
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);渲染分页控件
创建一个分页导航组件，允许用户切换页码。通常包括页码按钮和前进/后退按钮：
const Pagination = ({ itemsPerPage, totalItems, paginate }) => {
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
pageNumbers.push(i);
}
return (
<nav>
<ul className="pagination">
{pageNumbers.map(number => (
<li key={number} className="page-item">
<a onClick={() => paginate(number)} href="#" className="page-link">
{number}
</a>
</li>
))}
</ul>
</nav>
);
};完整组件示例
将上述逻辑整合到一个完整组件中：
import React, { useState } from 'react';
const PaginatedList = ({ data }) => {
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(5);
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
const paginate = pageNumber => setCurrentPage(pageNumber);
return (
<div>
<ul>
{currentItems.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
<Pagination
itemsPerPage={itemsPerPage}
totalItems={data.length}
paginate={paginate}
/>
</div>
);
};
const Pagination = ({ itemsPerPage, totalItems, paginate }) => {
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
pageNumbers.push(i);
}
return (
<nav>
<ul className="pagination">
{pageNumbers.map(number => (
<li key={number} className="page-item">
<a onClick={() => paginate(number)} href="#" className="page-link">
{number}
</a>
</li>
))}
</ul>
</nav>
);
};
export default PaginatedList;高级优化
对于大数据量或复杂场景，可以考虑以下优化：
添加上一页/下一页按钮，提升用户体验：
<button
onClick={() => setCurrentPage(prev => (prev > 1 ? prev - 1 : prev))}
disabled={currentPage === 1}
>
Previous
</button>
<button
onClick={() => setCurrentPage(prev =>
(prev < Math.ceil(data.length / itemsPerPage) ? prev + 1 : prev)
)}
disabled={currentPage === Math.ceil(data.length / itemsPerPage)}
>
Next
</button>实现跳转到指定页码的输入框：
const [goToPage, setGoToPage] = useState('');
const handleGoToPage = e => {
e.preventDefault();
const page = parseInt(goToPage);
if (page >= 1 && page <= Math.ceil(data.length / itemsPerPage)) {
setCurrentPage(page);
}
};
// 在渲染中添加
<form onSubmit={handleGoToPage}>
<input
type="number"
value={goToPage}
onChange={e => setGoToPage(e.target.value)}
min="1"
max={Math.ceil(data.length / itemsPerPage)}
/>
<button type="submit">Go</button>
</form>使用现有库
对于快速实现，可以考虑使用现成的React分页库，如react-paginate：
import ReactPaginate from 'react-paginate';
// 在组件中使用
<ReactPaginate
pageCount={Math.ceil(data.length / itemsPerPage)}
onPageChange={({ selected }) => setCurrentPage(selected + 1)}
containerClassName={'pagination'}
activeClassName={'active'}
/>这种方法提供了现成的样式和交互功能，适合需要快速开发的场景。
