React Ant Design 后台管理系统：实现点击菜单动态切换标签页

在 Ant Design 中，要实现点击菜单出现对应的动态标签页，可以使用 Tabs 组件。

首先，需要在菜单项的点击事件中记录当前选中的菜单项，并将该信息传递给 Tabs 组件。可以使用 useState 来保存当前选中的菜单项的 key。

import { useState } from 'react';
import { Menu, Tabs } from 'antd';

const { TabPane } = Tabs;

const MenuComponent = () => {
  const [activeKey, setActiveKey] = useState('home');

  const handleMenuClick = (e) => {
    setActiveKey(e.key);
  };

  return (
    <div>
      <Menu onClick={handleMenuClick} selectedKeys={[activeKey]} mode="horizontal">
        <Menu.Item key="home">Home</Menu.Item>
        <Menu.Item key="dashboard">Dashboard</Menu.Item>
        <Menu.Item key="settings">Settings</Menu.Item>
      </Menu>
      <Tabs activeKey={activeKey}>
        <TabPane tab="Home" key="home">
          {/* Home content */}
        </TabPane>
        <TabPane tab="Dashboard" key="dashboard">
          {/* Dashboard content */}
        </TabPane>
        <TabPane tab="Settings" key="settings">
          {/* Settings content */}
        </TabPane>
      </Tabs>
    </div>
  );
};

export default MenuComponent;

在上面的示例中，activeKey 用于记录当前选中的菜单项的 key，handleMenuClick 函数用于处理菜单项的点击事件，并更新 activeKey 的值。Tabs 组件中的 activeKey 属性用于控制当前显示的标签页。

当用户点击菜单项时，activeKey 会更新为对应的菜单项的 key，从而使得 Tabs 组件中对应的标签页显示出来。