当前位置：首页 > news >正文

react菜单，动态绑定点击事件，菜单分离出去单独的js文件，Ant框架

news 来源：原创 2025/6/8 6:58:45

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;