Fix renderSubtreeIntoContainer to update context

src/addons/__tests__/renderSubtreeIntoContainer-test.js

@@ -12,13 +12,13 @@
 'use strict';
 
 var React = require('React');
+var ReactDOM = require('ReactDOM');
 var ReactTestUtils = require('ReactTestUtils');
 var renderSubtreeIntoContainer = require('renderSubtreeIntoContainer');
 
 describe('renderSubtreeIntoContainer', function() {
 
   it('should pass context when rendering subtree elsewhere', function() {
-
     var portal = document.createElement('div');
 
     var Component = React.createClass({
@@ -92,4 +92,107 @@ describe('renderSubtreeIntoContainer', function() {
       },
     });
   });
+
+  it('should update context if it changes due to setState', function() {
+    var container = document.createElement('div');
+    document.body.appendChild(container);
+    var portal = document.createElement('div');
+
+    var Component = React.createClass({
+      contextTypes: {
+        foo: React.PropTypes.string.isRequired,
+        getFoo: React.PropTypes.func.isRequired,
+      },
+
+      render: function() {
+        return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
+      },
+    });
+
+    var Parent = React.createClass({
+      childContextTypes: {
+        foo: React.PropTypes.string.isRequired,
+        getFoo: React.PropTypes.func.isRequired,
+      },
+
+      getChildContext: function() {
+        return {
+          foo: this.state.bar,
+          getFoo: () => this.state.bar,
+        };
+      },
+
+      getInitialState: function() {
+        return {
+          bar: 'initial',
+        };
+      },
+
+      render: function() {
+        return null;
+      },
+
+      componentDidMount: function() {
+        renderSubtreeIntoContainer(this, <Component />, portal);
+      },
+
+      componentDidUpdate() {
+        renderSubtreeIntoContainer(this, <Component />, portal);
+      },
+    });
+
+    var instance = ReactDOM.render(<Parent />, container);
+    expect(portal.firstChild.innerHTML).toBe('initial-initial');
+    instance.setState({bar: 'changed'});
+    expect(portal.firstChild.innerHTML).toBe('changed-changed');
+  });
+
+  it('should update context if it changes due to re-render', function() {
+    var container = document.createElement('div');
+    document.body.appendChild(container);
+    var portal = document.createElement('div');
+
+    var Component = React.createClass({
+      contextTypes: {
+        foo: React.PropTypes.string.isRequired,
+        getFoo: React.PropTypes.func.isRequired,
+      },
+
+      render: function() {
+        return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
+      },
+    });
+
+    var Parent = React.createClass({
+      childContextTypes: {
+        foo: React.PropTypes.string.isRequired,
+        getFoo: React.PropTypes.func.isRequired,
+      },
+
+      getChildContext: function() {
+        return {
+          foo: this.props.bar,
+          getFoo: () => this.props.bar,
+        };
+      },
+
+      render: function() {
+        return null;
+      },
+
+      componentDidMount: function() {
+        renderSubtreeIntoContainer(this, <Component />, portal);
+      },
+
+      componentDidUpdate() {
+        renderSubtreeIntoContainer(this, <Component />, portal);
+      },
+    });
+
+    ReactDOM.render(<Parent bar="initial" />, container);
+    expect(portal.firstChild.innerHTML).toBe('initial-initial');
+    ReactDOM.render(<Parent bar="changed" />, container);
+    expect(portal.firstChild.innerHTML).toBe('changed-changed');
+  });
+
 });

src/renderers/dom/client/ReactMount.js

@@ -287,10 +287,11 @@ var ReactMount = {
   _updateRootComponent: function(
       prevComponent,
       nextElement,
+      nextContext,
       container,
       callback) {
     ReactMount.scrollMonitor(container, function() {
-      ReactUpdateQueue.enqueueElementInternal(prevComponent, nextElement);
+      ReactUpdateQueue.enqueueElementInternal(prevComponent, nextElement, nextContext);
       if (callback) {
         ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback);
       }
@@ -439,6 +440,10 @@ var ReactMount = {
       null,
       nextElement
     );
+    var nextContext = parentComponent ?
+      parentComponent._reactInternalInstance._processChildContext(
+        parentComponent._reactInternalInstance._context
+      ) : emptyObject;
 
     var prevComponent = getTopLevelWrapperInContainer(container);
 
@@ -453,6 +458,7 @@ var ReactMount = {
         ReactMount._updateRootComponent(
           prevComponent,
           nextWrappedElement,
+          nextContext,
           container,
           updatedCallback
         );
@@ -501,11 +507,7 @@ var ReactMount = {
       nextWrappedElement,
       container,
       shouldReuseMarkup,
-      parentComponent != null ?
-        parentComponent._reactInternalInstance._processChildContext(
-          parentComponent._reactInternalInstance._context
-        ) :
-        emptyObject
+      nextContext
     )._renderedComponent.getPublicInstance();
     if (callback) {
       callback.call(component);

src/renderers/native/ReactNativeMount.js

@@ -118,7 +118,7 @@ var ReactNativeMount = {
       var prevWrappedElement = prevComponent._currentElement;
       var prevElement = prevWrappedElement.props;
       if (shouldUpdateReactComponent(prevElement, nextElement)) {
-        ReactUpdateQueue.enqueueElementInternal(prevComponent, nextWrappedElement);
+        ReactUpdateQueue.enqueueElementInternal(prevComponent, nextWrappedElement, emptyObject);
         if (callback) {
           ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback);
         }

src/renderers/shared/stack/reconciler/ReactUpdateQueue.js

@@ -246,8 +246,9 @@ var ReactUpdateQueue = {
     enqueueUpdate(internalInstance);
   },
 
-  enqueueElementInternal: function(internalInstance, newElement) {
-    internalInstance._pendingElement = newElement;
+  enqueueElementInternal: function(internalInstance, nextElement, nextContext) {
+    internalInstance._pendingElement = nextElement;
+    internalInstance._context = nextContext;
     enqueueUpdate(internalInstance);
   },