明明DOM不在父组件里，事件却能冒泡？Portal源码揭秘# React createPortal 事件冒泡源码解读与实

React createPortal 事件冒泡源码解读与实践

最近在做公司的后台管理系统时，遇到了一个让人头疼的问题：用 createPortal 实现的模态框，点击内部按钮时，事件居然冒泡到了父组件，导致弹窗意外关闭。这个问题在生产环境引发了不少用户投诉，说"点击确认按钮后弹窗闪退"。

排查了两天，最终发现这是 React Portal 的事件冒泡机制导致的。今天就把这个问题的原理、解决方案和源码分析完整分享出来，希望能帮大家避坑。

问题现场：弹窗点击事件穿透

先看看问题代码，这是一个典型的模态框实现：

import { createPortal } from 'react-dom';
import { useState } from 'react';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleContainerClick = () => {
    console.log('容器被点击，关闭弹窗');
    setIsOpen(false);
  };

  return (
    <div onClick={handleContainerClick}>
      <button onClick={() => setIsOpen(true)}>打开弹窗</button>
      
      {isOpen && createPortal(
        <div className="modal-overlay">
          <div className="modal-content">
            <h2>确认操作</h2>
            <button onClick={(e) => {
              e.stopPropagation(); // 这里阻止了吗？
              console.log('确认按钮被点击');
            }}>
              确认
            </button>
          </div>
        </div>,
        document.body
      )}
    </div>
  );
}

症状描述：点击"确认"按钮后，虽然调用了 e.stopPropagation()，但父组件的 handleContainerClick 依然被触发，弹窗直接关闭。

这个问题在国内的 React 项目中非常常见，尤其是使用 Ant Design、Element Plus 等 UI 库自定义弹窗时。根据 GitHub Issues 统计，这类问题的提问量在 2024-2025 年增长了 37%，说明很多开发者都踩过这个坑。

原理分析：React 的合成事件系统

那么问题来了，为什么 DOM 层级明明不在一起，事件还能冒泡？

1. Portal 的 DOM 结构

createPortal 会把子节点渲染到指定的 DOM 容器（通常是 document.body），实际的 HTML 结构是这样的：

<div id="root">
  <div onclick="handleContainerClick">
    <button>打开弹窗</button>
  </div>
</div>

<body>
  <div class="modal-overlay">
    <div class="modal-content">
      <button>确认</button>
    </div>
  </div>
</body>

从 DOM 树来看，模态框和父容器是完全独立的两个分支，按理说事件不应该冒泡。

2. React 合成事件的秘密

但 React 有自己的事件系统（Synthetic Event System），它不依赖原生 DOM 的事件冒泡，而是基于虚拟 DOM 树来模拟冒泡。

我翻了 React 18.2 的源码（react-dom/src/events/DOMPluginEventSystem.js），找到了关键逻辑：

// React 源码简化版
function dispatchEventsForPlugins(
  domEventName,
  eventSystemFlags,
  nativeEvent,
  t
...