如何在Ant Design Dropdown的overlay中创建React Portal解决点击失效问题

问题根因 #

• Ant Design Menu 组件默认统一管理子项点击事件，部分版本下单独给 Menu.Item 绑定的 onClick 会被内部逻辑拦截，无法触发。
• 现有状态更新写法直接依赖 counter 变量，存在闭包陷阱，多次触发后可能出现更新结果不符合预期的问题。
• 后续要应用到支持排序的 Table 列头时，需要处理事件冒泡，避免右键菜单和列头自带的排序、筛选逻辑冲突。

修复代码 #

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

// 示例样式可自行调整
const STYLING = {
  padding: '20px',
  border: '1px solid #ccc'
}

const App = () => {
  const [counter, setCounter] = useState(1);

  // 统一处理菜单点击逻辑
  const handleMenuClick = (e) => {
    switch(e.key) {
      case 'five':
        setCounter(prev => prev + 5);
        break;
      case 'ten':
        setCounter(prev => prev + 10);
        break;
      default:
        break;
    }
  };

  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="five">by 5</Menu.Item>
      <Menu.Item key="ten">by 10</Menu.Item>
    </Menu>
  );

  return (
    <div>
      <p>Counter: {counter}</p>
      <div onClick={() => setCounter(prev => prev + 1)} style={STYLING}>
        <p>Click here to increment</p>
        <Dropdown overlay={menu} trigger={["contextMenu"]}>
          {/* Table列头场景下，此处加onContextMenu阻止冒泡，避免触发列头自带逻辑 */}
          <span onContextMenu={e => e.stopPropagation()}>
            Right click here for custom increment
          </span>
        </Dropdown>
      </div>
    </div>
  );
};

其他说明 #

你提到的 ReactDOM.createPortal 不需要额外实现，Ant Design Dropdown 组件默认已经将弹出层通过 Portal 渲染到 body 节点，不会和父容器的事件、样式产生冲突。

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