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) }
                            },
                        ]}
                    />

警报消除

经验分享 程序员 微信小程序 职场和发展