antD对Menu的更新造成的警告

最新推荐文章于 2022-10-11 14:18:53 发布

P1NKN1N1

最新推荐文章于 2022-10-11 14:18:53 发布

阅读量3.8k

点赞数

分类专栏： Web前端开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45825645/article/details/126715615

版权

Web前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

昨天在跟着视频做前端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') }
                            },
                        ]}
                    />

警报消除