API解读：
1. Menu 组件属性：
mode：菜单的展示方式，可选值为 "horizontal"、"vertical"、"inline"，默认为 "vertical"。
theme：菜单的主题，可选值为 "light"、"dark"，默认为 "light"。
selectedKeys：当前选中的菜单项 key 值。
defaultSelectedKeys：默认选中的菜单项 key 值。
openKeys：当前展开的菜单项 key 值。
defaultOpenKeys：默认展开的菜单项 key 值。
inlineCollapsed：是否收起内嵌菜单。
Menu.Item 组件属性：
key：菜单项的唯一标识。
disabled：是否禁用菜单项。
icon：菜单项的图标。
Menu.SubMenu 组件属性：
key：子菜单的唯一标识。
title：子菜单的标题。
disabled：是否禁用子菜单。
icon：子菜单的图标。
Menu 组件方法：
onClick：点击菜单项时触发的回调函数。
onOpenChange：展开/关闭子菜单时触发的回调函数。
Menu 组件的功能：
- 支持多级菜单和子菜单。
- 支持水平和垂直两种展示方式。
- 支持内嵌菜单。
- 支持自定义菜单项和子菜单的样式和图标。
- 支持点击菜单项和子菜单时触发回调函数。
- 支持展开和关闭子菜单时触发回调函数。
- 支持通过 selectedKeys 和 openKeys 控制菜单项的选中和展开状态。
其下的所有子组件Ant Design 的 Menu 组件包含以下组件：
Menu：导航菜单的容器组件，支持水平和垂直两种方式的展示，可以包含多个 Menu.Item 和 Menu.SubMenu 组件。
Menu.Item：导航菜单项组件，用于展示一个菜单项，可以设置图标和禁用状态。
Menu.SubMenu：导航子菜单组件，用于展示一个子菜单，可以包含多个 Menu.Item 和 Menu.SubMenu 组件，支持多级子菜单。
Menu.Divider：导航菜单分割线组件，用于在菜单中添加分割线。
Menu.ItemGroup：导航菜单分组组件，用于将多个 Menu.Item 组合在一起，可以设置分组标题。
Menu.SubMenu.SubMenu：导航子菜单的子菜单组件，用于在子菜单中添加多级子菜单。
以上组件是 Ant Design 的 Menu 组件中最主要的组件，可以根据需求进行组合和配置，实现不同的导航菜单效果。
1.水平顶部导航栏
代码及解释如下：
import { AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import { useState } from 'react';
import { NavLink } from 'react-router-dom';
//首先我们写数据
const items=[
{
label:(<NavLink to='/table'>表格</NavLink>)
//导航文本内容带有路由跳转功能
key:'mail'
//导航唯一表示,不可缺
},
{
label: '禁用标题',
key: 'app',
icon: <AppstoreOutlined />,
disabled: true,
//此导航是否可用
},
{
label: '子菜单选项',
key: 'subme',
icon: <SettingOutlined />,
//子菜单配置项
children: [
{
type: 'group',
// 子菜单项的类型，可以是 "group" 或 "item"
//group展开样式 item 不展开样式
label: 'Item 3',
children: [
//子菜单下的菜单配置
{
label: 'Option 3',
key: 'setting:1',
},
{
label: 'Option 4',
key: 'setting:2',
},
],
},
{
type: 'group',
label: 'Item 2',
children: [
{
label: 'Option 3',
key: 'setting:3',
},
{
label: 'Option 4',
key: 'setting:4',
},
],
},
],
},
{
label: (
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
带有超链接的导航
//使用路由更好一些
</a>
),
key: 'alipay',
},
]
//menu 渲染
const App()=()=>{
const [current,setCurret]=useState('mail')
//创建状态 下面在导航选中需要key所以我们需要先写一个初始值
const clickMenu=(e)=>{
setCurret(e.key)
}
//创建点击时修改选中事件 解读就是点击哪一行选中哪一行的key 就给curret 然后渲染到 menu中
return(
<>
<Menu onClick={clickMenu} selectedKeys={[current]} mode="vertical"items={items} style={{ width: 200 }} />
//解读:onClick 点击时调用， `selectedKeys` 属性，使得选中的菜单项呈现选中状态。
mode 为导航是垂直还是水平 items为渲染内容，style为样式
</>
)
}
效果如下：
2.垂直内嵌式导航
讲一下官网的实现原理： 写个函数传入属性然后我们调用函数写入值然后渲染即可
陌生API：
defaultSelectedKeys: 默认选中的菜单项的 key 值，可以是一个字符串或者字符串数组。defaultOpenKeys: 默认展开的子菜单的 key 值，可以是一个字符串或者字符串数组。mode: 菜单的模式，可以是inline、horizontal或者vertical，分别表示内嵌菜单、水平菜单和垂直菜单。默认值是vertical。下列代码中，
defaultSelectedKeys的值是['1']，表示默认选中第一个菜单项；defaultOpenKeys的值是['sub1']，表示默认展开第一个导航菜单项的子菜单；mode的值是inline，表示使用内嵌菜单模式。这些属性可以根据需要进行修改，以满足不同的需求。例如，如果想要默认展开多个子菜单，可以将
defaultOpenKeys的值设置为一个字符串数组，包含多个子菜单的 key 值。
代码如下：
import { MailOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
function getItem(label, key, icon, children, type) {
return {
key,
icon,
children,
label,
type,
};
}
const items = [
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),
getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),
]),
getItem('Navigation Two', 'sub2', null, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
]),
{
type: 'divider',
},
getItem('Navigation Three', 'sub4', <SettingOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Option 11', '11'),
getItem('Option 12', '12'),
]),
getItem('Group', 'grp', null, [getItem('Option 13', '13'), getItem('Option 14', '14')], 'group'),
];
const App = () => {
const onClick = (e) => {
console.log('click ', e);
};
return (
<Menu
onClick={onClick}
style={{
width: 256,
}}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
//展开的导航
mode="inline"
items={items}
them='dark'
//主题颜色定制，浅色是light 深色是dark
/>
);
};
export default App;
效果官网所示，不在展示
3.合并所有父导航：
原理不写：只写代码：
const rootSubmenuKeys = ['sub1', 'sub2','sub3', 'sub4'];
//创建合并的父导航key的数组值
const [openKeys, setOpenKeys] = useState(['sub1']);
const onOpenChange = (keys) => {
const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
setOpenKeys(keys);
} else {
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
}
};
导航部分讲解完毕！
