React Antd 动态下拉菜单答案

【问题标题】：React Antd dynamic dropdown menuReact Antd 动态下拉菜单
【发布时间】：2020-03-24 10:09:23
【问题描述】：

我正在使用带有 JSON 的 Antd 下拉菜单组件，我想创建一个动态菜单，该菜单根据我的 JSON 进行更改（我使用 express 获取）

目前为止

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

但这似乎不起作用，任何帮助都会很棒！

【问题讨论】：

这是Menu.Item 不是Menu.item
您需要确保将{...props} 传递给Menu 的所有子组件（例如任何Submenu 或Menu.Item）。有关此示例，请参阅此相关答案：stackoverflow.com/questions/61869430/…

标签： javascript reactjs antd ant-design-pro

【解决方案1】：

您需要单独映射您的项目，然后将其推送到菜单对象中。如果您从道具更新菜单，这可能会在渲染内部发生。

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>

【讨论】：