首先你需要准备一个类似如下的树形json
const lists = [
{
key: "2",
name: "tab2",
feat1: "",
children: [
{
key: "2-1",
name: "2-1",
feat1: "xxxx",
},
{
key: "2-2",
name: "2-2",
feat1: "zzzz",
},
],
},
{
key: "3",
name: "tab3",
feat1: "",
children: [
{
key: "3-1",
name: "3-1",
feat1: "aaaa",
},
{
key: "3-2",
name: "3-2",
feat1: "",
children: [
{
key: "3-2-1",
name: "3-2-1",
feat1: "qqqq",
},
{
key: "3-2-2",
name: "3-2-2",
feat1: "wwww",
},
]
},
],
},
{
name: "tab5",
feat1: "llll",
key: "5",
},
];
然后需要一个递归函数
const genMenu = (dataList: any[]) => {
return dataList.map((t1) => {
if (!t1.children) {
return (
<Menu.Item>
<a href={t1.feat1}>{t1.name}</a>
</Menu.Item>
);
}
return <SubMenu title={t1.name}>{genMenu(t1.children)}</SubMenu>;
});
};
最后渲染组件
const newMenu1 = (
<Menu>
{lists.map((t1) => {
if (!t1.children) {
return (
<Menu.Item>
<a href={t1.feat1}>{t1.name}</a>
</Menu.Item>
);
}
return <SubMenu title={t1.name}>{genMenu(t1.children)}</SubMenu>;
})}
</Menu>
);
return (
<Dropdown overlay={newMenu1}>
<a onClick={(e) => e.preventDefault()}>
list menu <DownOutlined />
</a>
</Dropdown>
);
附：效果 codesandbox地址
