如何用react做分页
使用React实现分页功能
在React中实现分页功能通常涉及以下几个关键步骤：数据分片、状态管理和UI渲染。以下是具体实现方法：
数据分片处理
从后端API获取完整数据列表后，需要按每页显示数量分割数据。假设每页显示itemsPerPage条数据：
const paginate = (items, currentPage, itemsPerPage) => {
const startIndex = (currentPage - 1) * itemsPerPage;
return items.slice(startIndex, startIndex + itemsPerPage);
};状态管理
使用React的useState管理当前页码和每页显示数量：
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10); // 可调整为动态值
const [totalItems, setTotalItems] = useState(0);分页UI组件
创建分页导航组件，包含页码按钮和导航控制：
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
return (
<div className="pagination">
<button
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
>
上一页
</button>
{Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
<button
key={page}
onClick={() => onPageChange(page)}
className={currentPage === page ? 'active' : ''}
>
{page}
</button>
))}
<button
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}
>
下一页
</button>
</div>
);
};完整示例集成
将分页逻辑与数据展示结合：
function App() {
const [data, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 5;
useEffect(() => {
// 模拟API调用
fetchData().then(res => {
setData(res);
});
}, []);
const currentItems = paginate(data, currentPage, itemsPerPage);
const totalPages = Math.ceil(data.length / itemsPerPage);
return (
<div>
<ul>
{currentItems.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={setCurrentPage}
/>
</div>
);
}优化建议
- 虚拟滚动：对于大数据量，考虑使用
react-window等库实现虚拟滚动 - API分页：直接让后端处理分页，仅请求当前页数据
- 样式优化：添加CSS过渡效果提升用户体验
- 响应式设计：根据屏幕尺寸动态调整每页显示数量
常见问题解决方案
- 页码过多：显示当前页前后各2页，其他用省略号表示
- 数据更新：重置到第一页时使用
setCurrentPage(1) - 空数据：添加条件渲染避免空状态错误
通过以上方法可以构建一个完整的React分页组件，根据实际需求调整分页逻辑和UI样式即可。
