❤ React体系29-antd5左侧菜单最新版+Router（v6）实现(2024-06最新下)

❤ React体系29-antd5左侧菜单最新版+Router（v6）实现(2024-06最新下)

之前我们写了左侧菜单的实现，在最新的版本之中菜单的方式写法已经进行进行了更改，接下来我们看看新旧的不同和如何实现并且优化

1、antd菜单新旧对比

老版本出现的情况

Warning: [antd: Menu] children is deprecated. Please use items instead.

官方建议

Ant Design 版进行了版本更新。由于 Ant Design 的菜单组件（Menu）在下一个主要版本中将删除 children 属性，并更改为 items 属性。

旧版本写法

4.20及以前版本Menu的写法

js

复制代码

<Menu mode="inline" theme="dark" defaultSelectedKeys={['1']} style={ { height: '100%', borderRight: 0 }}> <Menu.Item icon={<HomeOutlined />} key="1"> 数据概览 </Menu.Item> <Menu.Item icon={<DiffOutlined />} key="2"> 内容管理 </Menu.Item> <Menu.Item icon={<EditOutlined />} key="3"> 发布文章 </Menu.Item> </Menu>

新版本写法

更新之后不再在Menus组件之中写子节点，改成了直接通过属性items配置类型的添加

js

复制代码

//结构方面 <Menu defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode="inline" theme="dark" inlineCollapsed={collapsed} items={items} /> </> //配置item方面 const items = [ { key: '1', icon: <PieChartOutlined />, label: 'Option 1', }, { key: '2', icon: <DesktopOutlined />, label: 'Option 2', }, { key: 'sub1', label: 'Navigation One', icon: <MailOutlined />, children: [ { key: '5', label: 'Option 5', }, { key: '6', label: 'Option 6', }, { key: '7', label: 'Option 7', }, { key: '8', label: 'Option 8', }, ], }, ];

2、项目antd菜单最新写法（2024-06-05）

我们先看看新菜单里面的参数和作用