React Portals 传送门

学习如何使用 React Portal 将子节点渲染到父组件 DOM 层级之外的节点中。 · 难度：入门 · +15XP

Portals 概念

Portal 提供了一种将子节点渲染到存在于父组件 DOM 层级之外的 DOM 节点中的方式。语法：ReactDOM.createPortal(child, container)。常见用途：模态框、工具提示、悬浮菜单等，避免父容器的 overflow 或 z-index 影响。

1. 基本用法

首先在 HTML 中添加一个额外的根元素，例如 <div id='portal-root'></div>。然后在组件中使用 createPortal。

import ReactDOM from 'react-dom';
function Modal({ children }) {
  const portalRoot = document.getElementById('portal-root');
  return ReactDOM.createPortal(
    <div className='modal-overlay'>
      {children}
    </div>,
    portalRoot
  );
}

2. 事件冒泡

尽管 Portal 将内容渲染到 DOM 树的不同位置，但事件冒泡仍然按照 React 组件树进行，而不是 DOM 树。这意味着 Portal 内部触发的事件会冒泡到包含 Portal 的父组件。

练习提示

在下方示例中，点击按钮会通过 Portal 将模态框渲染到 #portal-root 中。尝试修改模态框的样式，或添加关闭按钮。