[英]React Antd dynamic dropdown menu
我正在使用带有 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
<Menu onClick={this.onClick}>
{this.state.getSoftware.map((data, i) => (
<Menu.Item key={i}>{data.Name}</Menu.Item>
))}
</Menu>
您需要单独映射您的项目,然后将其推入菜单对象内。 如果您从道具更新菜单,这可能会在渲染内部发生。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.