如何在父组件(DOM层次结构)之外渲染子组件- React.js

import ReactDOM from 'react-dom';

class ParentComponent extends React.Component {
  render() {
    const container = document.createElement('div'); // 创建一个目标容器节点
    document.body.appendChild(container); // 将目标容器节点添加到DOM中

    return (
      <div>
        {/* 其他父组件的内容 */}
        <Portal container={container}>
          <ChildComponent />
        </Portal>
      </div>
    );
  }
}

class Portal extends React.Component {
  componentDidMount() {
    this.portalElement = document.createElement('div');
    document.body.appendChild(this.portalElement);
    this.componentDidUpdate();
  }

  componentDidUpdate() {
    ReactDOM.render(<div>{this.props.children}</div>, this.portalElement);
  }

  componentWillUnmount() {
    ReactDOM.unmountComponentAtNode(this.portalElement);
    document.body.removeChild(this.portalElement);
  }

  render() {
    return null;
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 子组件的内容 */}
      </div>
    );
  }
}