react如何分
React 分页实现方法
在 React 中实现分页功能可以通过多种方式完成，以下是几种常见的方法：
使用状态管理分页数据
在组件内部维护当前页码和每页数据量的状态，通过计算切片数据实现分页。
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);渲染分页按钮
根据总数据量和每页显示数量计算总页数，渲染分页导航。
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
pageNumbers.push(i);
}
return (
<div>
{currentItems.map(item => (
<div key={item.id}>{item.name}</div>
))}
<div>
{pageNumbers.map(number => (
<button key={number} onClick={() => setCurrentPage(number)}>
{number}
</button>
))}
</div>
</div>
);使用第三方库
可以考虑使用专门的分页组件库，如 react-paginate：
import ReactPaginate from 'react-paginate';
function PaginatedItems({ itemsPerPage, data }) {
const [itemOffset, setItemOffset] = useState(0);
const endOffset = itemOffset + itemsPerPage;
const currentItems = data.slice(itemOffset, endOffset);
const pageCount = Math.ceil(data.length / itemsPerPage);
const handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % data.length;
setItemOffset(newOffset);
};
return (
<>
<Items currentItems={currentItems} />
<ReactPaginate
breakLabel="..."
nextLabel="next >"
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel="< previous"
renderOnZeroPageCount={null}
/>
</>
);
}服务器端分页
对于大量数据，建议实现服务器端分页，只请求当前页面的数据：
const fetchData = async (page) => {
const response = await fetch(`/api/items?page=${page}&limit=${itemsPerPage}`);
const data = await response.json();
setData(data.items);
setTotalPages(data.totalPages);
};分页组件优化
可以添加以下功能提升用户体验：
- 上一页/下一页按钮
- 跳转到指定页码输入框
- 当前页高亮显示
- 禁用不可用按钮状态
- 响应式分页条数
分页实现的核心是根据当前页码计算数据切片范围，并通过状态管理跟踪当前页位置。根据项目需求选择客户端分页或服务器端分页方案。
