function createPortal(
  children: ReactNodeList,
  container: Container,
  key: ?string = null,
): React$Portal {
  invariant(
    isValidContainer(container),
    'Target container is not a DOM element.',
  );
  // TODO: pass ReactDOM portal implementation as third argument
  // $FlowFixMe The Flow type is opaque but there's no way to actually create it.
  return createPortalImpl(children, container, null, key);
}

import React from 'react';
import ReactDOM from 'react-dom';
 
/**
 * @function getContainer 渲染组件的父组件
 * @param children 需要渲染的组件
 * @export
 * @class Portal
 * @extends {React.Component}
 */
export default class Portal extends React.Component {
  componentDidMount() {
    this.createContainer();
  }
 
 componentDidUpdate(prevProps) {
    const { didUpdate } = this.props;
    if (didUpdate) {
      didUpdate(prevProps);
    }
  }
 
  componentWillUnmount() {
    this.removeContainer();
  }
 
  createContainer() {
    this._container = this.props.getContainer();
    this.forceUpdate();
  }
 
  removeContainer() {
    if (this._container) {
      this._container.parentNode.removeChild(this._container);
    }
  }
 
  render() {
  if (this._container) {
      ReactDOM.createPortal(this.props.children, this._container);
    }
    return null;
  }
}

const getContainer = (domId = 'c-modal') => {
  const domContainer = document.createElement('div');
  domContainer.id = domId;
  domContainer.style.position = 'absolute';
  domContainer.style.top = '0';
  domContainer.style.left = '0';
  domContainer.style.width = '100%';
  document.getElementsByTagName('body')[0].appendChild(domContainer);
  return domContainer;
}

<Portal getContainer={() => this.getContainer('c-id')}>需要渲染的组件</Portal>

import React from 'react';
import ReactDOM from 'react-dom';
 
/**
 * @function getContainer 渲染组件的父组件
 * @param children 需要渲染的组件
 * @export
 * @class Portal
 * @extends {React.Component}
 */
export default class Portal extends React.Component {
  componentDidMount() {
    this.createContainer();
  }
 
  componentDidUpdate() {
    // React版本较低，不使用ReactDOM.createPortal
    ReactDOM.unstable_renderSubtreeIntoContainer(
      this,
      this.props.children,
      this._container,
    );
  }
 
  componentWillUnmount() {
    this.removeContainer();
  }
 
  createContainer() {
    this._container = this.props.getContainer();
    this.forceUpdate();
  }
 
  removeContainer() {
    if (this._container) {
      this._container.parentNode.removeChild(this._container);
    }
  }
 
  render() {
    return null;
  }
}