React Antd 動態下拉菜單

Question

我正在使用帶有 JSON 的 Antd 下拉菜單組件，我想創建一個動態菜單，該菜單根據我的 JSON（我使用 express 獲取）而變化

到目前為止我有

    const menu = (
  <Menu onClick={onClick}>
    {
    this.state.getSoftware.map((data,i) => (<Menu.item key={i}>{data.Name}</Menu.item>))
    }
  </Menu>
);

但這似乎不起作用，任何幫助都會很棒！

Answer 1

它是Menu.Item而不是Menu.item

<Menu onClick={this.onClick}>
        {this.state.getSoftware.map((data, i) => (
          <Menu.Item key={i}>{data.Name}</Menu.Item>
        ))}
      </Menu>

Answer 2

您需要單獨映射您的項目，然后將其推入菜單對象內。 如果您從道具更新菜單，這可能會在渲染內部發生。

const menus = Object.entries(scenes).map((key) => {
      return (
        <Menu.Item key={key[0]} icon={<UserOutlined />}>
          {key[1].name}
        </Menu.Item>
      )
    });
const menu = () => {
      return (
        <Menu onClick={handleMenuClick}>
          {menus}
        </Menu>
      )

然后在代碼中渲染菜單：

<Dropdown overlay={menu}>
   <Button>
     Assign Navigation <DownOutlined />
   </Button>
 </Dropdown>