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;
相关推荐
拾光拾趣录9 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲16 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃26 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军27 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子30 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游30 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子31 分钟前
智能前端实践之 shot-word demo
前端
归于尽32 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810132 分钟前
vite 插件
前端
无数山34 分钟前
autorelease pool
前端