ProxyRenderer.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class ProxyRenderer extends Component {
  constructor(props) {
    super(props);

    this.container = null;
    this.proxy = null;
    this.state = { active: false };
  }

  componentDidMount() {
    if(this.props.proxyActive) {
      this.activateProxy();
    }
  }

  componentWillReceiveProps(nextProps) {
    const { proxyActive } = nextProps;
    const { active } = this.state;
    if (proxyActive) {
      if (active) {
        this.renderProxy();
      } else {
        this.activateProxy();
      }
    }
  }

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

    this.proxy = null;
    this.container = null;
    this.setState({ active: false });
  }

  activateProxy() {
    this.setState({ active: true });
    this.renderProxy();
  }

  renderProxy() {
    const { props, state } = this;
    let { children } = this.props;

    if (!this.container) {
      this.container = document.createElement('div');
      document.body.appendChild(this.container);
    }

    this.proxy = ReactDOM.unstable_renderSubtreeIntoContainer(
      this,
      children,
      this.container
    );

    console.log(this.proxy);
  }

  render() {
    const { children } = this.props;

    return children;
  }
}