按钮来使用React中的Ant设计切换选项卡？

npm install antd react react-dom

import React from 'react';
import { Tabs } from 'antd';
import 'antd/dist/antd.css';

const { TabPane } = Tabs;

const MyTabs = () => {
  const handleTabChange = (key) => {
    console.log(key); // 在这里可以处理选项卡切换的逻辑
  };

  return (
    <Tabs defaultActiveKey="1" onChange={handleTabChange}>
      <TabPane tab="选项卡1" key="1">
        这是选项卡1的内容
      </TabPane>
      <TabPane tab="选项卡2" key="2">
        这是选项卡2的内容
      </TabPane>
      <TabPane tab="选项卡3" key="3">
        这是选项卡3的内容
      </TabPane>
    </Tabs>
  );
};

export default MyTabs;

import React from 'react';
import ReactDOM from 'react-dom';
import MyTabs from './MyTabs';

ReactDOM.render(<MyTabs />, document.getElementById('root'));