报错截图
报错原因
Ant Design 版进行了版本更新。由于 Ant Design 的菜单组件(Menu)在下一个主要版本中将删除 children
属性,并更改为 items
属性。
解决办法
4.20及以前版本Menu的写法
<Menu
mode="inline"
theme="dark"
defaultSelectedKeys={['1']}
style={{ height: '100%', borderRight: 0 }}>
<Menu.Item icon={<HomeOutlined />} key="1">
数据概览
</Menu.Item>
<Menu.Item icon={<DiffOutlined />} key="2">
内容管理
</Menu.Item>
<Menu.Item icon={<EditOutlined />} key="3">
发布文章
</Menu.Item>
</Menu>
更新之后不再在Menus组件之中写孩子节点,直接通过属性items添加
function getItem(label, key, icon) {
return {
key,
icon,
label,
}
}
const items = [
getItem('部门管理', '1', <HomeOutlined />),
getItem('人员管理', '2', <DiffOutlined />),
getItem('内容管理', '3', <EditOutlined />),
]
<Menu
mode="inline"
theme="dark"
defaultSelectedKeys={['1']}
style={{ height: '100%', borderRight: 0 }}
items={items}
/>