Warning: [antd: Menu] children
will be removed in next major version. Please use items
instead.
andt 更新导致警告 https://ant.design/components/menu-cn/
在 4.20.0 版本后,我们提供了
项目原来 的写法
const MenuList = [
{
key: '/Home',
label: '首页'
},
{
key: '/MobxExplain',
label: 'mobx案例'
},
{
key: '/HOCExplain',
label: '高阶组件'
}
]
class MenuView extends react.PureComponent {
// 生成菜单
MapMenuList = () => {
const mapMenuNode = MenuList.map(({ label, key, to }) => {
return (
<Menu.Item key={key}>
<Link to={to}>{label}</Link>
</Menu.Item>
)
})
return mapMenuNode
}
render() {
return (
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
// inlineCollapsed={false}
>
{this.MapMenuList()}
</Menu>
)
}
}
更新之后的写法这样子
const MenuView = (props) => {
const { history } = props
const onClick = (MenuItem) => {
history.push(MenuItem.key)
}
return (
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
items={MenuList}
onClick={onClick} // 点击子菜单触发
// inlineCollapsed={false}
>
</Menu>
)
}