如何使用React 中的 ReactDOM.createPortal ？

ReactDOM.createPortal() 是 React 的一个高级 API，它主要用于在父组件的 DOM 层次结构外部渲染子节点，但逻辑上仍然保持在父组件的组件树中。这通常用于当你需要子组件从视觉上“脱离”它的父组件时，例如在构建模态框、悬浮卡片或任何应该在页面上其他位置显示的组件时。

使用方法：

1. 创建一个容器元素：首先，你需要在 index.html 或任何其他基础 HTML 文件中定义一个 DOM 节点作为 portal 的容器。

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

1. 使用 ReactDOM.createPortal：在 React 组件中，你可以使用 ReactDOM.createPortal 将某个组件渲染到先前定义的容器中。

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

class MyPortalComponent extends React.Component {
  render() {
    // 使用 createPortal 将这个 div 渲染到 portal-root 容器中
    return ReactDOM.createPortal(
      <div>{'This is rendered in a portal'}</div>,
      document.getElementById('portal-root')
    );
  }
}

export default MyPortalComponent;

使用场景举例：

假设我们需要构建一个模态框，当用户点击某个按钮时显示，而且该模态框应该覆盖其他页面内容。

jsx
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showModal: false };
  }

  handleOpenModal = () => {
    this.setState({ showModal: true });
  }

  handleCloseModal = () => {
    this.setState({ showModal: false });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleOpenModal}>打开模态框</button>
        {this.state.showModal && (
          <Modal onClose={this.handleCloseModal}>
            <p>这是一个模态框内容</p>
            <button onClick={this.handleCloseModal}>关闭</button>
          </Modal>
        )}
      </div>
    );
  }
}

function Modal({ onClose, children }) {
  return ReactDOM.createPortal(
    <div className="modal-backdrop">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>关闭模态框</button>
      </div>
    </div>,
    document.getElementById('portal-root')
  );
}

export default App;

在这个例子中，Modal 组件通过 ReactDOM.createPortal 被渲染到一个独立于主应用 UI 层次结构的 DOM 节点。这使得模态框可以覆盖应用的其他部分，同时仍然保持在 React 组件树中，这样就可以管理状态和生命周期等，就如同它是任何其他 React 组件一样。