React JS中Antd Menu组件如何配置指定菜单项为子菜单

核心实现逻辑 #

Ant Design 的 Menu 组件通过菜单项配置中的children字段识别嵌套子菜单，你只需要将Monthly Earning、Loop 1、Loop 2三个菜单项，放到对应父级菜单的children数组中即可完成嵌套。
注意原代码中所有菜单点击都会触发路由跳转，父级菜单仅用于展开/收起子菜单时，需要加判断避免父项点击触发无效跳转。

修改后可直接运行的完整代码 #

import { Menu } from 'antd';
import { useNavigate } from 'react-router-dom';

const SideMenu = () => {
  const navigate = useNavigate();

  const menuItems = [
    // 父级菜单项，三个目标菜单作为子项嵌套
    {
      key: "earningModule",
      label: '收益模块', // 可替换为你需要的父级菜单名称
      children: [
        {
          key: "earningCharts",
          label: 'Monthly Earning '
        },
        {
          key: "loop1",
          label: 'Loop 1'
        },
        {
          key: "loop2",
          label: 'Loop 2'
        }
      ]
    },
    {
      key: "/",
      label: 'Passenger History'
    },
    {
      key: "user",
      label: 'User'
    },
    {
      key: "settings",
      label: 'Settings'
    }
  ];
  
  return (
    <Menu 
      items={menuItems} 
      onClick={(menuItem) => {
        // 仅叶子节点（无嵌套子菜单的项）触发路由跳转
        if (!menuItem.item.props.children) {
          navigate(menuItem.key)
        }
      }}
    />
  )
};

export default SideMenu;

可选配置说明 #

• 父级菜单的label字段可根据业务需求自定义，比如替换为「数据统计」「功能模块」等符合系统命名的文本
• 若需要页面加载后默认展开该子菜单，给Menu组件新增属性defaultOpenKeys={['earningModule']}即可，属性值为父级菜单项对应的key
• 若需要点击父级菜单也触发路由跳转，删除onClick事件里的子项判断逻辑，保留原有navigate(menuItem.key)写法即可

内容的提问来源于stack exchange，提问作者Mark