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;