antd tabs切换页面

Antd Tabs可以实现在一个页面中切换不同的内容区域。具体步骤如下：

1. 引入Antd Tabs组件

import { Tabs } from 'antd';
const { TabPane } = Tabs;

2. 编写Tabs组件

<Tabs defaultActiveKey="1"> // 设置默认展示的Tab页
  <TabPane tab="Tab 1" key="1"> // 设置Tab名称和key
    Content of Tab Pane 1
  </TabPane>
  <TabPane tab="Tab 2" key="2">
    Content of Tab Pane 2
  </TabPane>
  <TabPane tab="Tab 3" key="3">
    Content of Tab Pane 3
  </TabPane>
</Tabs>

3. 添加事件处理函数

在Tab组件中可以添加onChange事件处理函数，用于在Tab页切换时执行相关操作。

<Tabs defaultActiveKey="1" onChange={callback}>
  ...
</Tabs>

function callback(key) {
  console.log(key);
}

完整代码示例：

import { Tabs } from 'antd';
const { TabPane } = Tabs;

function App() {
  function callback(key) {
    console.log(key);
  }

  return (
    <Tabs defaultActiveKey="1" onChange={callback}>
      <TabPane tab="Tab 1" key="1">
        Content of Tab Pane 1
      </TabPane>
      <TabPane tab="Tab 2" key="2">
        Content of Tab Pane 2
      </TabPane>
      <TabPane tab="Tab 3" key="3">
        Content of Tab Pane 3
      </TabPane>
    </Tabs>
  );
}

以上代码将展示一个包含三个Tab页的页面，点击Tab页时会在控制台输出相应的key值。可以根据key值执行相应的操作。