React中如何通过鼠标右键事件向DOM Body添加弹出菜单并设置位置？

嘿，我来帮你搞定这个React右键菜单的问题！你当前的代码里直接把对象数组menu传给document.body.appendChild()是行不通的——因为那不是DOM元素，React有自己的渲染机制，咱们用更符合React范式的方式来实现，同时解决菜单挂载到body和位置设置的问题：

核心思路 #

1. 用ReactDOM.createPortal把菜单组件渲染到document.body（这是React官方推荐的将组件挂载到DOM任意节点的方式）
2. 通过右键事件的clientX/clientY获取鼠标位置，动态设置菜单的定位
3. 添加点击页面其他区域关闭菜单的逻辑，提升用户体验

完整实现代码 #

import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

// 右键菜单组件
const RightClickMenu = ({ menuItems, position, onClose }) => {
  // 如果没有要显示的菜单项，直接返回null
  if (!menuItems?.length) return null;

  // 用ref保存菜单DOM节点，处理点击菜单内部不关闭的逻辑
  const menuRef = useRef(null);

  useEffect(() => {
    // 点击页面其他区域关闭菜单
    const handleClickOutside = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) {
        onClose();
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [onClose]);

  return ReactDOM.createPortal(
    <div
      ref={menuRef}
      style={{
        position: 'fixed',
        top: `${position.y}px`,
        left: `${position.x}px`,
        background: '#fff',
        border: '1px solid #ccc',
        borderRadius: '4px',
        padding: '8px 0',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        zIndex: 9999,
        minWidth: '150px'
      }}
    >
      {menuItems.map((item, index) => (
        <div
          key={index}
          style={{
            padding: '8px 16px',
            cursor: 'pointer',
            fontSize: '14px'
          }}
          onClick={() => {
            item.func();
            onClose(); // 点击菜单项后关闭菜单
          }}
          onMouseEnter={(e) => e.target.style.background = '#f5f5f5'}
          onMouseLeave={(e) => e.target.style.background = '#fff'}
        >
          {item.title}
        </div>
      ))}
    </div>,
    document.body // 指定挂载到body节点
  );
};

// 你的主组件示例
const YourComponent = () => {
  const [showMenu, setShowMenu] = useState(false);
  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });

  // 右键点击事件处理函数
  const popupMenuOnRightClick = (e) => {
    e.preventDefault(); // 阻止默认右键菜单
    // 创建菜单数据
    const menu = [
      {
        name: 'item1',
        title: 'itemTitle1',
        func: () => alert('I am itemTitle1')
      },
      {
        name: 'item2',
        title: 'itemTitle2',
        func: () => alert('I am itemTitle2')
      }
    ];
    // 设置菜单位置和显示状态
    setMenuPosition({ x: e.clientX, y: e.clientY });
    setShowMenu(true);
  };

  return (
    <div
      style={{ width: '100vw', height: '100vh', background: '#f0f0f0' }}
      onContextMenu={popupMenuOnRightClick} // 绑定右键事件
    >
      右键点击此区域弹出菜单
      {showMenu && (
        <RightClickMenu
          menuItems={menu}
          position={menuPosition}
          onClose={() => setShowMenu(false)}
        />
      )}
    </div>
  );
};

export default YourComponent;

关键部分解释 #

• ReactDOM.createPortal：它能让我们把React组件渲染到DOM树的任意节点（这里是document.body），同时保持组件和主组件的状态关联，这比直接操作原生DOM更符合React的设计理念。
• 菜单定位：用fixed定位，结合右键事件的clientX（鼠标横坐标）和clientY（鼠标纵坐标）设置top和left，确保菜单出现在鼠标点击的位置。
• 关闭逻辑：通过监听mousedown事件，点击菜单外部时关闭菜单；同时点击菜单项后也自动关闭，提升交互体验。

内容的提问来源于stack exchange，提问作者Yanshof