如何递归渲染菜单

Question

我正在尝试递归渲染 AntDesign Menu。我找到了一些如何基于普通 ul 和 li 标签进行操作的示例并且它们有效，但是当我尝试将 li 更改为 Menu.Item 和 ul 到 SubMenu 然后每个项目都处于活动状态并且样式错误。

示例数据：

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

我的尝试：

<Menu
   mode="inline"
   onClick={(e) => handleClick(e)}
   >
     {data.map((item) => (
        <ListItem item={item} />
      ))}
</Menu>

 const ListItem = ({ item }: iLProps) => {
    let children = null;
    if (item.items && item.items.length) {
      children = (
        <SubMenu key={item.fileName} title={item.fileName}>
          {item.items.map((nestedItem: NavItem) => (
            <ListItem item={nestedItem} />
          ))}
        </SubMenu>
      );
    }
    return (
      <Menu.Item key={item.fileName}>
        {item.fileName}
        {children}
      </Menu.Item>
    );
  };

如果有人需要有关 codesandbox 的工作示例，我可以添加。

Answer 1

这段代码对我有用：

const recursiveMenu = (data) => {
  return data.map(({ fileName, items = [] }) => {
    console.log({ fileName, items });
    if (!items?.length) {
      return <Item key={Math.random()}>{fileName}</Item>;
    }

    return (
      <SubMenu key={Math.random()} title={fileName}>
        {recursiveMenu(items)}
      </SubMenu>
    );
  });
};

在菜单组件中：

export default function App() {
  return <Menu mode="inline">{recursiveMenu(data)}</Menu>;
}

这是一个工作代码和框link：https://codesandbox.io/s/sleepy-wind-55otl

如何递归渲染菜单

How to recursively render menu

reactjs

next.js

antd