如何在Ant Design 4.19.5版本中创建动态菜单

实现思路 #

遍历你提供的数组数据，将每个对象中的主标题作为Menu.SubMenu的title，对应的子标题列表遍历生成Menu.Item，同时复用原静态菜单中的选中状态管理、点击事件逻辑。

完整代码实现 #

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

const DynamicMenu = () => {
  const [activeKey, setActiveKey] = useState([]);
  // 你的菜单数据
  const menuData = [
    { 'Main Title 1': ['Sub Title 1', 'Sub Title 2', 'Sub Title 3'] },
    { 'Main Title 2': ['Sub Title 4', 'Sub Title 5', 'Sub Title 6'] }
  ];
  // 沿用静态菜单的key起始值
  let keyCounter = 13;

  return (
    <Menu selectable selectedKeys={activeKey}>
      {menuData.map((menuGroup) => {
        // 提取每个菜单组的主标题和子项列表
        const [mainTitle, subTitles] = Object.entries(menuGroup)[0];
        return (
          <Menu.SubMenu key={mainTitle} title={mainTitle}>
            {subTitles.map((subTitle) => {
              const itemKey = keyCounter.toString();
              keyCounter += 1;
              return (
                <Menu.Item
                  key={itemKey}
                  onClick={(item) => setActiveKey([item.key])}
                >
                  <Link to={{}}>{subTitle}</Link>
                </Menu.Item>
              );
            })}
          </Menu.SubMenu>
        );
      })}
    </Menu>
  );
};

export default DynamicMenu;

关键细节说明 #

• 数据解析：用Object.entries处理每个单键对象，快速提取主标题和对应的子菜单列表，适配你提供的数组结构。
• Key生成：沿用静态菜单的key序列（从13开始递增），确保key的唯一性；如果需要更稳定的key，可以使用${mainTitle}-${subTitle}这类组合值。
• 逻辑复用：保留原有的activeKey状态管理和点击事件逻辑，保证动态菜单和静态菜单的交互行为完全一致。
• 路由配置：Link的to属性请根据实际业务路由填充，比如可以通过格式化子标题生成语义化路由：to={/${subTitle.toLowerCase().replace(/\s+/g, '-')}}。

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