React Portals

React Portal 是 React JavaScript 库中的一个功能，它提供了一种在父组件层次结构之外渲染子组件的方法。换句话说，它允许你创建一个子组件，并将其呈现在 DOM 树的不同部分，而不受其父组件层次结构的限制。

React Portal 在需要在 DOM 树的不同部分渲染组件子元素但仍想维护组件之间父子关系时非常有用。例如，如果您有一个模态框组件并想在屏幕中央显示它，您可以使用 React Portal 将模态框组件的子元素呈现在其父组件之外并放入一个独立的 DOM 节点中。

要创建一个 React Portal，您需要使用来自 react-dom 包的 createPortal 函数。该函数接受两个参数：第一个是您想要呈现的子元素，第二个是您想要将子元素呈现到的 DOM 节点。

下面是一个使用 React Portal 的示例：

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

const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

export default Modal;

在这个示例中，我们创建了一个 Modal 组件，并使用 createPortal 函数来呈现其子元素。我们还创建了一个新的 DOM 节点 this.el，以便将子元素渲染到其中。最后，我们将 Modal 组件的 el DOM 节点添加到一个独立的 DOM 节点 modalRoot 中，该节点位于父组件层次结构之外。