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

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

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>