如何在React函数组件中实现Semantic UI分页并控制激活页

Semantic UI的Pagination组件在函数组件里完全可以用状态管理实现受控的页码控制，不用局限于类组件写法。你之前用的defaultActivePage是非受控模式，组件自己管理页码状态，所以没法主动控制；换成受控模式就能解决问题，步骤很简单：

1. 用React的useState钩子维护当前页码状态
2. 给Pagination组件传activePage属性绑定状态值
3. 实现onPageChange回调更新状态，同时触发业务逻辑

完整代码示例 #

import { useState } from 'react';
import { Pagination } from 'semantic-ui-react';

function CustomPagination() {
  // 初始化当前页码，可根据业务需求设置默认值
  const [currentPage, setCurrentPage] = useState(5);
  // 总页数，可根据实际数据动态计算（比如接口返回的总条数/每页条数）
  const totalPages = 10;

  // 页码切换时触发的回调
  const handlePageChange = (e, { activePage }) => {
    setCurrentPage(activePage);
    // 这里可以添加数据请求、列表更新等业务逻辑
    // 比如 fetchData(activePage)
  };

  return (
    <Pagination
      activePage={currentPage}
      totalPages={totalPages}
      onPageChange={handlePageChange}
      // 可选：自定义分页样式，比如显示边界按钮、控制相邻页码数量
      boundaryRange={1}
      siblingRange={2}
    />
  );
}

export default CustomPagination;

关键说明 #

• 受控 vs 非受控：activePage是受控属性，由我们的状态currentPage控制，组件会自动高亮当前激活的页码；而defaultActivePage只是初始化值，后续组件自己管理状态，没法主动修改。
• 页码切换逻辑：onPageChange回调会接收点击的页码activePage，用它更新currentPage状态，组件就会同步更新高亮状态。
• 动态总页数：如果是从接口获取数据，总页数可以通过Math.ceil(总数据条数 / 每页显示条数)计算得到，替换示例里的totalPages即可。

内容的提问来源于stack exchange，提问作者Yashwanth K