I use `ReactDOM.unstable_renderSubtreeIntoContainer` to render a portal.

``` javascript
class Modal extends React.Component {

componentDidMount() {
    this.node = document.createElement('div');
    document.body.appendChild(this.node);
    this.renderPortal(this.props);
}

componentWillReceiveProps(nextProps) {
    this.renderPortal(nextProps);
}

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

renderPortal = (props) => {
    renderSubtreeIntoContainer(this, <ModalPortal {...props} />, this.node);
}

render() {
    return null;
  }
}
```

In my root component:

``` javascript
class App extends React.Component {
    static childContextTypes = {
        highlightColor: React.PropTypes.object
    }

    getChildContext() {
        return {
            highlightColor: this.props.highlightColor
        }
    }

    ...
}
```

The context of root component will be updated and passed to children if  `this.props.highlightColor` is changed. This is right.
I can access the correct context in the `<ModalPortal/>` component in the first render.
And after that the context passed to  `<ModalPortal/>` **does not change any more** when the context of root component changed.
But I can access the correct context in the `<Modal/>`  every render.

what's wrong with my code ?

ReactMount.unmountComponentAtNode(container);
      }
    }
    var reactRootElement = getReactRootElementInContainer(container);
    var containerHasReactMarkup =
      reactRootElement && !!internalGetID(reactRootElement);
    var containerHasNonRootReactChild = hasNonRootReactChild(container);
    if (__DEV__) {
      warning(
        !containerHasNonRootReactChild,
        'render(...): Replacing React-rendered children with a new root ' +
        'component. If you intended to update the children of this node, ' +
        'you should instead have the existing children update their state ' +
        'and render the new components instead of calling ReactDOM.render.'
      );
      if (!containerHasReactMarkup || reactRootElement.nextSibling) {
        var rootElementSibling = reactRootElement;
        while (rootElementSibling) {
          if (internalGetID(rootElementSibling)) {
            warning(
              false,
              'render(): Target node has markup rendered by React, but there ' +
              'are unrelated nodes as well. This is most commonly caused by ' +
              'white-space inserted around server-rendered markup.'
            );
            break;
          }
          rootElementSibling = rootElementSibling.nextSibling;
        }
      }