昨天在跟着视频做前端React实战项目的时候碰到的警告,当时报错是这个样子的
[antd: Menu]
children
will be removed in next major version. Please useitems
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') }
},
]}
/>
警报消除