1、菜單文件treeTop.js

// 頂部菜單
import { AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
// 定義菜單項數據
const treeTop = [{label: 'Docker管理',key: '1',icon: <AppstoreOutlined />,url:"/docker/index"},{label: '權限管理',key: '2',icon: <SettingOutlined />,children: [{ label: '管理員', key: '2-1',url:""},{ label: '退出登錄', key: '2-2',url:"/login"},],}
];export default treeTop;

菜單文件

'use client';
import React, { useState } from 'react';
import { Menu,message } from 'antd';
import treeTop from './treeTop.js';const Menus = () => {// 為菜單項添加 onClick 回調（動態綁定）treeTop.map((item,index) => {if (item.children) {item.children.map((child,index2) => {if (child.children) {// 三級菜單，是按鈕,按鈕是控制權限，無需加點擊事件//child.children.map((child2,index3) => {//  treeTop[index].children[index2].onClick = () => onClick(child2)//})}else{// 二級菜單treeTop[index].children[index2].onClick = () => onClick(child)}})}else{// 只有一級菜單treeTop[index].onClick = () => onClick(item)}})const [messageApi,contextHolder] = message.useMessage();const [current, setCurrent] = useState('1');// 菜單點擊事件處理函數const onClick = e => {console.log('click ', e);setCurrent(e.key);if (e.label === '退出登錄') {window.location.href = '/login'; // 重定向到登錄頁面 }if (e.label === '管理員') {messageApi.open({type: 'success',content: '操作成功',});messageApi.open({type: 'error',content: '操作失敗',});}};// 頁面return (<>{/* 提示 */}{contextHolder}{/* 頂部菜單onClick={onClick} */}<Menu selectedKeys={[current]} mode="horizontal" items={treeTop} /></>);
};
export default Menus;

升級存在url才加點擊事件

'use client';
import React, { useState } from 'react';
import { Menu,message } from 'antd';
import treeTop from './treeTop.js';const Menus = () => {// 為菜單項添加 onClick 回調（動態綁定）treeTop.map((item,index) => {if (item.children) {item.children.map((child,index2) => {// 沒有三級菜單，是按鈕,按鈕是控制權限，無需加點擊事件if (child.children) {// 三級菜單，是按鈕,按鈕是控制權限，無需加點擊事件// child.children.map((child2,index3) => {//   treeTop[index].children[index2].onClick = () => onClick(child2)// })}else{// 二級菜單// treeTop[index].children[index2].onClick = () => onClick(child)}// 二級菜單，url不為空，加點擊事件//if (child.url) {// 二級菜單，所以直接加點擊事件//  treeTop[index].children[index2].onClick = () => onClick(child)//}// 二級菜單，加點擊事件treeTop[index].children[index2].onClick = () => onClick(child)})}// 一級菜單，url不為空，加點擊事件,如果有children就是按鈕權限if (item.url) {treeTop[index].onClick = () => onClick(item)}})const [messageApi,contextHolder] = message.useMessage();const [current, setCurrent] = useState('1');// 菜單點擊事件處理函數const onClick = e => {console.log('click ', e);setCurrent(e.key);if (e.label === '退出登錄') {window.location.href = '/login'; // 重定向到登錄頁面 }if (e.label === '管理員') {messageApi.open({type: 'success',content: '操作成功',});messageApi.open({type: 'error',content: '操作失敗',});}};// 頁面return (<>{/* 提示 */}{contextHolder}{/* 頂部菜單onClick={onClick} */}<Menu selectedKeys={[current]} mode="horizontal" items={treeTop} /></>);
};
export default Menus;