如何使用React将子组件挂载到父组件外部？

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

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

  componentDidMount() {
    document.body.appendChild(this.externalContainer);
  }

  componentWillUnmount() {
    document.body.removeChild(this.externalContainer);
  }

  render() {
    return (
      <div>
        {/* 父组件的内容 */}
        <h1>Parent Component</h1>
        {/* 将子组件挂载到外部容器 */}
        {ReactDOM.createPortal(<ChildComponent />, this.externalContainer)}
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <h2>Child Component</h2>;
  }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));