如何递归呈现菜单

Question

我正在尝试递归渲染AntDesign菜单。我发现了一些例子如何基于正常的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>
);
});
};

在Menu组件中:

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

下面是一个工作的codesandbox链接:https://codesandbox.io/s/sleepy-wind-55otl