react如何实现分页
实现分页的基本思路
在React中实现分页通常需要结合状态管理、数据分割和UI组件。核心逻辑包括计算总页数、当前页数据切片以及页码切换功能。
数据准备与状态管理
初始化分页相关状态：
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10);
const [totalItems, setTotalItems] = useState(0);计算分页元数据：
const totalPages = Math.ceil(totalItems / itemsPerPage);
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);分页组件实现
创建可交互的分页控制器组件：
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
const pageNumbers = [];
for (let i = 1; i <= totalPages; i++) {
pageNumbers.push(i);
}
return (
<nav>
<ul className="pagination">
{pageNumbers.map(number => (
<li key={number} className={currentPage === number ? 'active' : null}>
<button onClick={() => onPageChange(number)}>
{number}
</button>
</li>
))}
</ul>
</nav>
);
};API集成方案
对于从后端API获取分页数据的情况：
useEffect(() => {
const fetchData = async () => {
const response = await fetch(`/api/items?page=${currentPage}&limit=${itemsPerPage}`);
const { data, total } = await response.json();
setData(data);
setTotalItems(total);
};
fetchData();
}, [currentPage, itemsPerPage]);样式优化建议
添加基础CSS样式增强用户体验：
.pagination {
display: flex;
list-style: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination button {
padding: 5px 10px;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
}
.pagination .active button {
background: #007bff;
color: white;
border-color: #007bff;
}高级功能扩展
实现动态每页显示数量控制：
const [itemsPerPage, setItemsPerPage] = useState(10);
const handleItemsPerPageChange = (e) => {
setItemsPerPage(Number(e.target.value));
setCurrentPage(1); // 重置到第一页
};
// 在渲染部分添加选择器
<select value={itemsPerPage} onChange={handleItemsPerPageChange}>
<option value="5">5 per page</option>
<option value="10">10 per page</option>
<option value="20">20 per page</option>
</select>
