React新手求助：如何实现Ant Design Tabs与Pagination联动

要让分页组件点击时切换对应标签页，核心是用React状态统一管理两者的激活状态，将两个组件改成受控模式，具体实现如下：

关键改动说明 #

• 用useState维护当前激活的页码/标签页序号，作为两者的状态源
• Tabs组件替换defaultActiveKey为activeKey，绑定状态值（注意转成字符串，因为Tabs的key是字符串类型）
• Pagination组件设置current为状态值，通过onChange事件同步更新状态
• 可选：监听Tabs的onChange事件，实现标签页切换时同步更新分页（双向联动）

完整代码示例 #

import React, { useState } from 'react';
import { Tabs, Pagination } from 'antd';

const App: React.FC = () => {
  // 统一维护当前激活的序号，初始值为1
  const [activeIndex, setActiveIndex] = useState(1);

  // 分页切换时更新激活状态
  const handlePageChange = (page: number) => {
    setActiveIndex(page);
  };

  // 标签页切换时同步更新分页（可选，实现双向联动）
  const handleTabChange = (key: string) => {
    setActiveIndex(Number(key));
  };

  return (
    <div>
      <Tabs 
        activeKey={activeIndex.toString()} 
        onChange={handleTabChange}
      >
        <Tabs.TabPane tab="Tab 1" key="1">
          Content of Tab Pane 1
        </Tabs.TabPane>
        <Tabs.TabPane tab="Tab 2" key="2">
          Content of Tab Pane 2
        </Tabs.TabPane>
        <Tabs.TabPane tab="Tab 3" key="3">
          Content of Tab Pane 3
        </Tabs.TabPane>
      </Tabs>
      <div style={{ marginTop: 20, textAlign: 'center' }}>
        <Pagination
          current={activeIndex}
          onChange={handlePageChange}
          total={30}
          pageSize={10} // 这里设置每页10条，刚好对应3个标签页，可根据需求调整
        />
      </div>
    </div>
  );
};

export default App;

注意事项 #

• 确保Pagination的总页数和Tabs的标签页数量一致，比如示例中total=30、pageSize=10，刚好3页，对应3个标签页
• 如果不需要双向联动，删除Tabs的onChange属性即可，只保留分页控制标签页的逻辑

内容的提问来源于stack exchange，提问作者Manepalli Venkata Raju