如何在antdesign中创建动态菜单

Question

我想在antdesign中创建动态菜单，在4.19.5版本

静态菜单代码

<Menu selectable selectedKeys={activeKey}>

{ <Menu.SubMenu title="Main Title 1" >
<Menu.Item key={'13'} onClick={(item) => SetActivekey([item.key])}><Link to={{  }} > Sub Title 1</Link> </Menu.Item>
<Menu.Item key={'14'} onClick={(item) => SetActivekey([item.key])}><Link to={{  }} > Sub Title 2</Link></Menu.Item>
<Menu.Item key={'15'} onClick={(item) => SetActivekey([item.key])}><Link to={{  }} > Sub Title 3</Link></Menu.Item>
</Menu.SubMenu>}
{ <Menu.SubMenu title="Main Title 2">
<Menu.Item key={'16'} onClick={(item) => SetActivekey([item.key])}><Link to={{  }} > Sub Title 4 </Link></Menu.Item>
<Menu.Item key={'17'} onClick={(item) => SetActivekey([item.key])}><Link to={{  }} > Sub Title 5 </Link></Menu.Item>
<Menu.Item key={'18'} onClick={(item) => SetActivekey([item.key])}><Link to={{  }} > Sub Title 6</Link></Menu.Item>
</Menu.SubMenu>}
</Menu>

下面是我要用来创建菜单的数据

var Arr=[{ 'Main Title 1': ['Sub Title 1', 'Sub Title 2', 'Sub Title 3'] }, { 'Main Title 2': ['Sub Title 4', 'Sub Title 5', 'Sub Title 6'] }]

Answer 1

您可以简单地创建一个函数来构造子菜单，例如

const arr = [
{ "Main Title 1": ["Sub Title 1", "Sub Title 2", "Sub Title 3"] },
{ "Main Title 2": ["Sub Title 4", "Sub Title 5", "Sub Title 6"] }
];
function constructSubmenus(arr) {
return arr.map((e) => (
<Menu.SubMenu title={Object.keys(e)[0]}>
{Object.values(e)[0].map((f, i) => (
<Menu.Item key={i}> {f} </Menu.Item>
))}
</Menu.SubMenu>
));
}
return <Menu selectable>{constructSubmenus(arr)}</Menu>;

另一种选择是，如果您可以构造可以满足该属性的参数的数组，则可以使用Menu的属性items。您可以查看文档https://ant.design/components/menu