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) } }, ]} />
警报消除