react 函数组件 前端实现分页

React 函数组件的分页实现，可以通过以下步骤来完成：

1. 定义组件的状态：当前页码、每页显示数量、总数据量等。

const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [total, setTotal] = useState(0);

2. 定义获取数据的方法，并在组件挂载时调用该方法。

useEffect(() => {
  fetchData();
}, []);

const fetchData = async () => {
  const response = await fetch(`http://api.example.com/data?page=${currentPage}&pageSize=${pageSize}`);
  const data = await response.json();
  setTotal(data.total);
  setData(data.items);
}

3. 定义分页器组件，并传入当前页码、每页显示数量、总数据量等参数。

const Pagination = ({ currentPage, pageSize, total, onChange }) => {
  const pageCount = Math.ceil(total / pageSize);
  const pages = Array.from({ length: pageCount }, (_, i) => i + 1);

  return (
    <ul>
      {pages.map(page => (
        <li key={page} className={page === currentPage ? 'active' : ''} onClick={() => onChange(page)}>
          {page}
        </li>
      ))}
    </ul>
  );
};

4. 在组件中使用分页器，并在分页器页码变化时调用获取数据的方法。

<Pagination currentPage={currentPage} pageSize={pageSize} total={total} onChange={setCurrentPage} />

{data.map(item => (
  // 显示数据项
))}

通过以上步骤，即可实现基于 React 函数组件的前端分页功能。