React Portals 的用途

问题

React Portals 有什么用？

解答

React Portals 允许将子组件渲染到父组件 DOM 层次结构之外的位置，适用于以下场景：

模态框和对话框

将模态框渲染到根 DOM 之外，避免受父组件样式和布局的影响。

解决 z-index 层级问题

在复杂布局中，将组件渲染到具有更高 z-index 的容器中，确保正确的层叠显示。

全局固定定位组件

将组件（如 Tooltip、下拉菜单）渲染到 body 或其他容器中，不受父组件定位的限制。

优化动画性能

将动画内容渲染到更接近目标位置的 DOM 结构中，提升动画表现。

基本用法

import React from 'react';
import ReactDOM from 'react-dom';

function MyPortalComponent() {
  return ReactDOM.createPortal(
    <div>
      This is rendered using a portal!
    </div>,
    document.getElementById('portal-root')
  );
}

在 HTML 中需要预先创建目标容器：

<div id="root"></div>
<div id="portal-root"></div>

关键点

• Portal 将子组件渲染到指定的 DOM 节点，而非父组件内部
• 事件冒泡仍然遵循 React 组件树，而非 DOM 树
• 常用于模态框、Tooltip、下拉菜单等需要脱离父容器的组件
• 需要确保目标 DOM 节点在渲染前已存在