如何递归渲染Ant Design Menu并解决菜单项全激活、样式异常问题

问题原因 #

你当前的实现不符合Ant Design Menu组件的结构规范：存在子菜单的节点被你包裹了多余的Menu.Item层，SubMenu组件不能嵌套在Menu.Item内部使用，这是导致样式异常、所有菜单项同时处于激活状态的核心原因。

修复方案 #

调整ListItem组件的逻辑，存在子项时直接返回SubMenu，无子项时才返回Menu.Item即可：

const ListItem = ({ item }: iLProps) => {
  // 有子项直接渲染SubMenu
  if (item.items && item.items.length) {
    return (
      <SubMenu key={item.fileName} title={item.fileName}>
        {item.items.map((nestedItem: NavItem) => (
          <ListItem item={nestedItem} key={nestedItem.fileName} />
        ))}
      </SubMenu>
    );
  }
  // 无子项渲染普通菜单项
  return (
    <Menu.Item key={item.fileName}>
      {item.fileName}
    </Menu.Item>
  );
};

其他注意点 #

1. 你提供的示例JSON数据存在语法错误，对象之间缺少逗号，且属性名未加引号，修正后格式如下：

[
    {"fileName": "test1"},
    {"fileName": "test2"},
    {"fileName": "x",
     "items": [
      {"fileName": "test3"}
    ]}
]

2. 如果需要手动控制激活状态，可以给Menu组件绑定selectedKeys属性，指定当前激活的菜单项key即可避免异常选中的问题。

内容的提问来源于stack exchange，提问作者Monkey D. Teach