「React」Portal——将组件渲染到父组件层次结构之外的任何地方

React 的 Portal 提供了一种将子节点渲染到存在于父组件层次结构之外的 DOM 节点的方法。这是一个非常有用的功能，尤其是当父组件的样式或行为可能干扰子组件时。

为什么需要 Portal？

考虑以下场景：

1. 样式隔离：有时，你可能有一个组件（如模态对话框、下拉菜单或工具提示）需要在视觉上“浮动”在页面上，而不受其父元素样式的影响。如果你直接将这些组件放在其父元素内部，它们可能会受到父元素的overflow、z-index、opacity等CSS属性的影响。

2. 事件冒泡：在某些情况下，你可能不希望子组件的事件冒泡到其父组件。使用 Portal，你可以将子组件移出其父组件的DOM层次结构，从而避免不必要的事件冒泡。

如何使用 Portal？

React 提供了一个名为 ReactDOM.createPortal 的API来创建 Portal。这个API接受两个参数：要渲染的子节点和要将子节点附加到的DOM元素。

import ReactDOM from 'react-dom';

function Modal(props) {
  return ReactDOM.createPortal(
    <div className="modal">
      {props.children}
    </div>,
    document.body
  );
}

在上面的示例中，Modal 组件将其子节点渲染到 document.body，而不是其父组件的DOM结构中。

总结

React 的 Portal 是一个强大的功能，允许开发者将组件渲染到父组件层次结构之外的任何地方，从而避免了父组件对子组件的潜在干扰。这对于模态对话框、工具提示、下拉菜单等需要“浮动”在页面上的组件特别有用。