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

1、菜单文件treeTop.js

javascript 复制代码
// 顶部菜单
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;

菜单文件

javascript 复制代码
'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才加点击事件

javascript 复制代码
'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;
相关推荐
paopaokaka_luck25 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js