antd报错:Warning: [antd: Menu] `children` is deprecated. Please use `items` instead.怎么解决

 报错截图

报错原因

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}
    />

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值