Antd Menu组件使用问题：点击菜单切换对应页面需求实现

先梳理你代码里的几个问题：

• 没有处理菜单点击事件，无法触发页面切换
• 缺少根据选中菜单项渲染对应页面的逻辑
• 代码存在语法错误（比如items数组未闭合，组件return部分结构不完整）

下面是修正后的完整实现代码：

import { HomeFilled, SignalFilled, FileFilled } from '@ant-design/icons';
import { Menu } from 'antd';
import { useState } from 'react';
import Home from "./home/Home"; // React组件名需首字母大写，符合规范
// 按需导入其他页面组件，需提前创建
import Subcontractor from "./pages/Subcontractor";
import Worker from "./pages/Worker";
import Info from "./pages/Info";

function getItem(label, key, icon, children, type, style) {
  return {
    key,
    icon,
    children,
    label,
    type,
    style,
  };
}

const items = [
  getItem('홈 화면', 'home', <HomeFilled style={{ fontSize: '22px' }} />),
  getItem('운영관리', 'sub1', <SignalFilled style={{ fontSize: '22px' }} />, [
    getItem('업체관리', 'subcontractor', null, null, null, { fontSize: '20px', textAlign: 'left', textIndent: "27px" }),
    getItem('작업자관리', 'worker', null, null, null, { fontSize: '20px', textAlign: 'left', textIndent: "10px" }),
    getItem('근무관리', 'info', null, null, null, { fontSize: '20px', textAlign: 'left', textIndent: "27px" }),
  ])
]; // 补充items数组闭合

function Main2() {
  const [selectedKey, setSelectedKey] = useState('home'); // 管理当前选中菜单的key

  // 菜单点击事件处理函数
  const handleMenuSelect = ({ key }) => {
    setSelectedKey(key);
  };

  // 根据选中key渲染对应页面
  const renderContent = () => {
    switch (selectedKey) {
      case 'home':
        return <Home />;
      case 'subcontractor':
        return <Subcontractor />;
      case 'worker':
        return <Worker />;
      case 'info':
        return <Info />;
      default:
        return <Home />; // 默认显示首页
    }
  };

  return (
    <div style={{ display: 'flex' }}>
      <Menu
        selectedKeys={[selectedKey]} // 绑定选中状态
        defaultOpenKeys={['sub1']} // 默认展开子菜单
        mode="inline"
        theme='light'
        inlineCollapsed={false}
        items={items}
        onSelect={handleMenuSelect} // 绑定点击事件
        style={{
          width: "200px",
          background: "#195AC0",
          textAlign: "left",
          fontSize: "25px",
          color: "white",
          border: 'none'
        }}
      />
      {/* 右侧区域展示页面内容 */}
      <div style={{ flex: 1, padding: '20px' }}>
        {renderContent()}
      </div>
    </div>
  );
};

export default Main2;

核心逻辑说明：

• 用useState维护selectedKey状态，记录当前选中的菜单项
• 给Menu组件添加onSelect事件，点击时更新selectedKey
• 通过renderContent函数，根据selectedKey的不同返回对应页面组件
• 修正了原代码的语法错误，补充完整的组件结构

内容的提问来源于stack exchange，提问作者준범백