什么是React的Portal？-速码派

在React里，组件的JSX结构通常决定了DOM的嵌套关系。但有时你会遇到一个棘手的问题：一个组件在逻辑上属于某个父组件，但在DOM结构里，它需要被“挂”到另一个完全不同的地方去。最常见的例子就是模态框、通知弹窗、工具提示。React的Portal（门户）就是专门为了解决这种“视觉越狱”而生的。

Portal让组件渲染到任意DOM节点

简单说，Portal提供了一种能力，让你能把一个组件的子元素渲染到DOM树中任意一个指定的节点里，而不是局限在父组件的容器内。它在逻辑上保持属于原组件，但视觉上却跑到了别处。

import ReactDOM from 'react-dom';
function Modal({ children }) {
  // 假设页面里有一个 id 为 'modal-root' 的 div
  return ReactDOM.createPortal(
    children,
    document.getElementById('modal-root')
  );
}

ReactDOM.createPortal接收两个参数：第一个是要渲染的React子元素（通常是JSX），第二个是一个DOM元素，作为渲染的目标容器。调用后，children就会被渲染到那个目标容器里，完全跳出当前的组件层级。

为什么这很重要？解决样式和层级问题

想象你写了一个模态框组件，直接放在某个深度嵌套的<div>里。那个<div可能设置了overflow: hidden或者奇怪的z-index，你的模态框可能就被裁剪了，或者永远被压在下面出不来。

用Portal，你可以把模态框的内容直接“传送”到<body>标签的末尾。这样，它的position: fixed定位就不再受任何中间容器的CSS干扰，z-index管理也变得简单明了，因为它和页面其他内容在DOM层级上平起平坐了。

事件冒泡依然遵循React树

这是Portal最妙的一点。虽然DOM节点跑到了别处，但事件的冒泡行为依然按照React组件树的结构来。这意味着，在Portal内部触发的事件，会冒泡到React树中的祖先组件，而不是DOM树中的祖先节点。

function Parent() {
  const handleClick = () => { console.log('父组件捕获到点击'); };
  return (
    <div onClick={handleClick}>
      <Modal>
        <button>点我</button> {/* 点击这个按钮，会触发父组件的 handleClick */}
      </Modal>
    </div>
  );
}

这个特性确保了你的逻辑一致性。你为模态框写的关闭逻辑，依然可以由外层的组件来控制。

所以，Portal不是什么高深的概念，它就是一个实用的逃生舱。当你需要构建全局性的、需要突破布局限制的UI组件时，它就是那个能让你把组件“画”在正确地方的工具。

文章版权归作者所有，未经允许请勿转载。

THE END