如何在antdesign中創建動態菜單

Question

我想在 antdesign 中創建動態菜單，在 4.19.5 版本

這里代碼為 static 菜單

<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

例如，您可以簡單地創建一個 function 來構造該子菜單

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>;

另一種選擇是，如果您可以構造滿足該屬性的 arguments 的數組，則可以使用Menu的屬性items 。 可以上文檔查看 https://ant.design/components/menu