如何让Ant Design折叠菜单项右键显示「在新标签页打开」选项

我完全理解你的困扰——30多个菜单项逐个修改确实太耗费精力，下面这个基于事件委托和动态DOM操作的方案可以一次性解决问题，不用改动每个菜单项的代码结构：

核心思路 #

折叠状态下的Menu.Item没有渲染<a>标签，所以浏览器不会触发默认的链接右键菜单。我们通过在Menu组件上监听右键事件，动态创建临时<a>标签并模拟右键点击，让浏览器显示"在新标签页/窗口打开"的选项。

具体实现步骤 #

1. 统一菜单项的跳转地址存储 #

给每个Menu.Item添加data-href属性来存储跳转路径，同时抽离通用的点击事件处理函数，避免重复代码：

import { Menu } from 'antd';
import { useState, useRef } from 'react';

function YourLayout() {
  const [collapsed, setCollapsed] = useState(false);
  const menuRef = useRef(null);

  // 通用的菜单项点击处理函数
  const handleMenuItemClick = (e) => {
    const href = e.currentTarget.dataset.href;
    if (href) window.location.href = href;
  };

2. 添加右键菜单监听逻辑 #

在Menu组件上绑定onContextMenu事件，处理折叠状态下的右键点击：

const handleContextMenu = (e) => {
    // 找到点击的菜单项DOM节点（通过Ant Design的默认类名定位）
    const menuItem = e.target.closest('.ant-menu-item');
    // 只处理折叠状态下的菜单项，且存在跳转地址的情况
    if (!menuItem || !collapsed || !menuItem.dataset.href) return;

    e.preventDefault(); // 阻止默认右键菜单

    // 创建临时<a>标签
    const tempLink = document.createElement('a');
    tempLink.href = menuItem.dataset.href;
    tempLink.target = '_blank';
    // 隐藏临时标签，避免影响页面
    tempLink.style.position = 'fixed';
    tempLink.style.opacity = '0';
    document.body.appendChild(tempLink);

    // 模拟在临时标签上触发右键点击
    const rightClickEvent = new MouseEvent('contextmenu', {
      bubbles: true,
      cancelable: true,
      view: window,
    });
    tempLink.dispatchEvent(rightClickEvent);

    // 移除临时标签，清理DOM
    setTimeout(() => document.body.removeChild(tempLink), 100);
  };

3. 渲染Menu组件 #

把事件和状态绑定到Menu上，菜单项只需要添加data-href和通用点击事件：

return (
    <Menu
      ref={menuRef}
      mode="inline"
      collapsed={collapsed}
      onClick={handleMenuItemClick}
      onContextMenu={handleContextMenu}
    >
      <Menu.Item key="menu_1" data-href="../path/to/route">
        Dashboard
      </Menu.Item>
      {/* 其他30+个菜单项，只需添加data-href属性即可 */}
      <Menu.Item key="menu_2" data-href="../path/to/setting">
        Settings
      </Menu.Item>
      {/* ...更多菜单项 */}
    </Menu>
  );
}

方案优势 #

• 零逐个修改：所有菜单项只需添加data-href属性，不用每个都改结构
• 只针对折叠状态：展开状态下的右键行为不受影响
• 无DOM残留：临时创建的<a>标签会自动移除，不会污染页面
• 兼容浏览器默认行为：直接利用浏览器原生的右键菜单，不用自定义菜单组件

注意事项 #

• 确保Ant Design的Menu.Item类名是.ant-menu-item（不同版本可能略有差异，可通过开发者工具确认）
• 如果是前端路由（如React Router），只需把window.location.href替换为路由跳转逻辑即可，比如navigate(href)

内容的提问来源于stack exchange，提问作者Yulio Aleman Jimenez