Portals：如何让界面组件实现“传送”功能？

摘要

朋友们，你有没有遇到过这样的情况：在使用某个应用时，弹窗明明在逻辑上属于某个模块，但视觉效果上却覆盖了整个页面？或者发现工具提示的显示被其父容器的样式（比如 overflow: hidden或 z-i...

朋友们，你有没有遇到过这样的情况：在使用某个应用时，弹窗明明在逻辑上属于某个模块，但视觉效果上却覆盖了整个页面？或者发现工具提示的显示被其父容器的样式（比如 overflow: hidden或 z-index）给“切断”了，显示不完整？🤔 说实话，这在前端开发中还挺常见的。今天，博主就和大家聊聊解决这类问题的利器——Portals（传送门），希望能帮到你，特别是刚入门的朋友们。

简单来说，Portals 提供了一种超级能力，允许你将子组件渲染到父组件的 DOM 结构之外，几乎是任何你指定的 DOM 节点中去。这就好比给组件开了一个“任意门”或者“传送门”，让它可以去到 DOM 树的另一个地方“安家”。想象一下，一个原本在某个内部的模态框，通过 Portals，可以直接被“传送”到的直接子元素层级，这样它的样式就不会再受父容器的影响了，非常巧妙。

⚙️ Portals 到底是怎么工作的？

你可能想知道，这“传送”功能具体是怎么实现的呢？咱们就拿 React 的 ReactDOM.createPortal来举例吧，它的用法看起来是这样的：

javascript下载复制运行ReactDOM.createPortal(child, container)

child：这个就是你想要“传送”的内容，可以是一个 React 元素、一段字符串，或者一个片段（fragment）。
container：这个是目的地，一个 DOM 元素，child将会被渲染到这个容器里面。

这样操作之后，即便这个组件在 React 的组件树层级里仍然是你的子组件（行为保持不变，比如它还能正常接收 props 和参与上下文 Context），但在实际的浏览器 DOM 结构中，它已经被“传送”到了你指定的那个容器节点下。Angular 的 CDK（Component Dev Kit）里也有类似的 Portals 概念，实现思路也差不多。

🎯 为什么我们需要 Portals？解决现实痛点

Portals 可不是为了炫技，它确实解决了开发中的实际难题。云哥觉得，下面这几点尤其重要：

摆脱样式束缚：这是最经典的用途了。比如你的父组件设置了 overflow: hidden，或者一个比较低的 z-index，那么子组件里的模态框（Modal）、提示框（Tooltip）可能就会显示异常（被裁剪或者被遮挡）。通过 Portals 将这类组件“传送”到根部或其他高位节点，就能确保它们在视觉上突破父级样式的限制，完整展示。
管理动态内容：对于那些需要动态插入和移除的 UI 部分，比如加载动画、全局通知消息等，Portals 提供了一个非常清晰的管理方式。你可以直接把它们“传送”到指定的挂载点，逻辑上很干脆。
保持事件冒泡：这里有个非常关键的点需要大家注意！虽然被 Portals“传送”出去的组件在 DOM 结构上脱离了父组件，但在 React 的事件系统中，它仍然表现出事件冒泡的行为。意思是，发生在 Portal 组件内部的事件，还是会冒泡到 React 组件树中的祖先组件那里。这一点可能和有些朋友的直觉不太一样，但这样的设计其实保证了组件行为在逻辑上的一致性。

🛠️ 一起来看看 Portals 的实际用法

光说不练假把式，我们来看一个 React 中创建简单模态框的代码片段，这样更直观：

javascript下载复制运行// Modal 组件import React from 'react';import ReactDOM from 'react-dom';const Modal = ({ message, isOpen, onClose }) => {if (!isOpen) return null; // 如果不打开，就什么都不渲染// 使用 Portal 将模态框的内容渲染到 document.body 下return ReactDOM.createPortal(<div className="modal"><span>{message}span><button onClick={onClose}>关闭button>div>,document.body // 指定传送门的目的地为 body);};// 使用 Modal 的父组件function App() {const [isModalOpen, setModalOpen] = React.useState(false);return (<div className="app"><button onClick={() => setModalOpen(true)}>打开模态框button>{/* Modal 组件在 JSX 结构中是 App 的子组件 */}<Modalmessage="你好，世界！"isOpen={isModalOpen}onClose={() => setModalOpen(false)}/>div>);}

从这段代码可以看到，尽管在 App组件的 JSX 中被定义，但它的内容最终会通过 ReactDOM.createPortal被渲染到 document.body的末尾。这样，这个模态框在视觉上就不会受到 .app这个容器可能存在的样式影响了。

在 Angular 中，通过 CDK 的 Portal 相关的类和指令（如 CdkPortalOutlet），也能实现类似动态渲染组件或模板的效果。

💡 使用 Portals 时需要注意些什么？

Portals 功能强大，但使用时也有一些小细节要留心：

挂载点需存在：在使用 Portals 前，你需要确保目标容器（比如 document.body或者某个特定的 DOM 节点）是已经存在的。
性能考量：虽然 Portals 很好用，但也不要在项目里滥用。特别是在频繁渲染的场景下，需要留意可能带来的性能开销。对于简单的 UI重叠需求，有时候也许用 CSS 调整定位和层级（z-index）就能解决问题，不一定非要用 Portals。
理解事件冒泡：就像前面强调的，一定要记住 Portals 组件的事件冒泡是依据 React 树而非 DOM 树，这点在调试交互问题时非常关键。