antD对Menu的更新造成的警告
昨天在跟着视频做前端React实战项目的时候碰到的警告,当时报错是这个样子的
[antd: Menu] children will be removed in next major version. Please use items instead.
原代码 :
<Menu
mode="inline"
theme="dark"
selectedKeys={[selectedKey]}
style={
{ height: 100%, borderRight: 0 }}
>
<Menu.Item icon={<HomeOutlined />} key="/">
<Link to="/">数据概览</Link>
</Menu.Item>
<Menu.Item icon={<DiffOutlined />} key="/article">
<Link to="/article">内容管理</Link>
</Menu.Item>
<Menu.Item icon={<EditOutlined />} key="/publish">
<Link to="/publish">发布文章</Link>
</Menu.Item>
</Menu>
Menu中每个选项都采用<Menu.Item>组件,但是在新版本的antD中对这项进行了优化,使代码变得更加简洁,采用一个item对象,把Menu中所有的选项都放进去
<Menu
mode="inline"
theme="dark"
defaultSelectedKeys={[1]}
selectedKeys={test()}
style={
{ height: 100%, borderRight: 0 }}
items={[
{
key: 1,
icon: <HomeOutlined />,
label: `数据概览`,
onClick: () => { navigate(/); }
},
{
key: 2,
icon: <DiffOutlined />,
label: 内容管理,
onClick: () => { navigate(/article) }
},
{
key: 3,
icon: <EditOutlined />,
label: 发布文章,
// to: /publish,
onClick: () => { navigate(/publish) }
},
]}
/>
警报消除
