react实现网页分页

实现分页的基本思路

在React中实现分页功能通常需要以下几个核心部分：当前页码状态管理、数据分片逻辑、分页控件UI渲染。分页的本质是根据当前页码和每页条数对数据进行切片显示，并通过交互控件（如页码按钮）更新状态。

定义分页状态

使用React的useState钩子管理当前页码和每页数据量：

const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10); // 每页显示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.content}</div>
    ))}
    <div className="pagination">
      {pageNumbers.map(number => (
        <button 
          key={number} 
          onClick={() => setCurrentPage(number)}
          className={currentPage === number ? 'active' : ''}
        >
          {number}
        </button>
      ))}
    </div>
  </div>
);

添加分页导航功能

扩展基础功能，增加上一页/下一页按钮和禁用状态：

<button 
  onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
  disabled={currentPage === 1}
>
  上一页
</button>

<button
  onClick={() => setCurrentPage(prev => 
    Math.min(prev + 1, Math.ceil(data.length / itemsPerPage))
  )}
  disabled={currentPage === Math.ceil(data.length / itemsPerPage)}
>
  下一页
</button>

优化性能与用户体验

对于大数据量场景，考虑虚拟滚动或懒加载替代传统分页。可通过useMemo缓存分页计算结果：

const currentItems = useMemo(() => {
  const start = (currentPage - 1) * itemsPerPage;
  return data.slice(start, start + itemsPerPage);
}, [currentPage, itemsPerPage, data]);

完整组件示例

function Pagination({ data }) {
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10);

  const pageNumbers = [];
  const totalPages = Math.ceil(data.length / itemsPerPage);

  for (let i = 1; i <= totalPages; i++) {
    pageNumbers.push(i);
  }

  const currentItems = useMemo(() => {
    const start = (currentPage - 1) * itemsPerPage;
    return data.slice(start, start + itemsPerPage);
  }, [currentPage, itemsPerPage, data]);

  return (
    <div>
      <ul>
        {currentItems.map(item => (
          <li key={item.id}>{item.content}</li>
        ))}
      </ul>

      <div className="pagination-controls">
        <button 
          onClick={() => setCurrentPage(1)} 
          disabled={currentPage === 1}
        >
          首页
        </button>

        <button 
          onClick={() => setCurrentPage(p => Math.max(p - 1, 1))}
          disabled={currentPage === 1}
        >
          上一页
        </button>

        {pageNumbers.map(num => (
          <button
            key={num}
            onClick={() => setCurrentPage(num)}
            className={currentPage === num ? 'active' : ''}
          >
            {num}
          </button>
        ))}

        <button
          onClick={() => setCurrentPage(p => Math.min(p + 1, totalPages))}
          disabled={currentPage === totalPages}
        >
          下一页
        </button>

        <button 
          onClick={() => setCurrentPage(totalPages)} 
          disabled={currentPage === totalPages}
        >
          末页
        </button>
      </div>
    </div>
  );
}

样式建议

为分页控件添加基础CSS样式提升用户体验：

.pagination-controls {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.pagination-controls button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.pagination-controls button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}