react警告:Warning: [antd: Menu] children will be removed in next major version. Please use items instead.

这是由于ant v4.20+优化了导航菜单Menu的使用方式,采用优化后的方式使用菜单组件就可以了。

更新前:

<Menu
          onClick={this.handleClick}
            style={{ width: 256 }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline">     
            <Menu.Item key="sub1" icon={<PieChartOutlined />}>菜单1</Menu.Item>
        <Menu.Item key="sub2" icon={<PieChartOutlined />}>菜单2</Menu.Item>
            <SubMenu
              key="sub3"
              title={
                <span>
                  <SettingOutlined />
                  <span>菜单3</span>
                </span>
              }
            >
              <Menu.Item key="1">item1</Menu.Item>
              <Menu.Item key="2">item2</Menu.Item>
              <Menu.Item key="3">item3</Menu.Item>
            </SubMenu>
          </Menu>

更新后:

const items = [
        {
            key: 'sub1',
            icon: <MailOutlined />,
            label: '菜单1',
        },
        {
            key: 'sub2',
            icon: <PieChartOutlined />,
            label: '菜单2'
        },
        {
            key: 'sub3',
            icon: <PieChartOutlined />,
            label: '菜单3',
            children: [
                {
                    key: '1',
                    label: <Link to="/xxx">item1</Link>,
                },
                {
                    key: '2',
                    label: <Link to="/xxx">item2</Link>,
                },
                {
                    key: '3',
                    label: <Link to="/xxx">item3</Link>,
                }
            ]
        }
    ]
...
<Menu
                    onClick={handleClick}
                    style={{ width: 256 }}
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                    items={items}
                >

                </Menu>

 

 

 

posted @ 2023-03-16 18:07  抽风的皮鞭  阅读(1004)  评论(0编辑  收藏  举报