Fix the context handling when updating a rendered component.
Laurent Etiemble committed
Mar 24, 2015 at 08:29 UTC
357345a56df17d695b13b88c21edc2353507a124
2 files changed
+61
-1
src/core/ReactCompositeComponent.js
+1
-1
@@ -743,7 +743,7 @@ var ReactCompositeComponentMixin = {
743
this._renderedComponent,
744
thisID,
745
transaction,
746
- context
746
+ this._processChildContext(context)
747
);
748
this._replaceNodeWithMarkupByID(prevComponentID, nextMarkup);
749
}
src/core/__tests__/ReactCompositeComponent-test.js
+60
@@ -20,6 +20,7 @@ var ReactMount;
20
var ReactPropTypes;
21
var ReactServerRendering;
22
var ReactTestUtils;
23
+var ReactUpdates;
24
25
var reactComponentExpect;
26
var mocks;
@@ -37,6 +38,7 @@ describe('ReactCompositeComponent', function() {
38
ReactTestUtils = require('ReactTestUtils');
39
ReactMount = require('ReactMount');
40
ReactServerRendering = require('ReactServerRendering');
41
+ ReactUpdates = require('ReactUpdates');
42
43
MorphingComponent = React.createClass({
44
getInitialState: function() {
@@ -561,6 +563,64 @@ describe('ReactCompositeComponent', function() {
563
reactComponentExpect(grandchildInstance).scalarContextEqual({foo: 'bar', depth: 1});
564
});
565
566
+ it('should pass context when re-rendered', function() {
567
+ var parentInstance = null;
568
+ var childInstance = null;
569
+
570
+ var Parent = React.createClass({
571
+ childContextTypes: {
572
+ foo: ReactPropTypes.string,
573
+ depth: ReactPropTypes.number
574
+ },
575
+
576
+ getChildContext: function() {
577
+ return {
578
+ foo: 'bar',
579
+ depth: 0
580
+ };
581
+ },
582
+
583
+ getInitialState: function() {
584
+ return {
585
+ flag: false
586
+ }
587
+ },
588
+
589
+ render: function() {
590
+ var output = <Child />;
591
+ if (!this.state.flag) {
592
+ output = <span>Child</span>;
593
+ }
594
+ return output;
595
+ }
596
+ });
597
+
598
+ var Child = React.createClass({
599
+ contextTypes: {
600
+ foo: ReactPropTypes.string,
601
+ depth: ReactPropTypes.number
602
+ },
603
+
604
+ render: function() {
605
+ childInstance = this;
606
+ return <span>Child</span>;
607
+ }
608
+ });
609
+
610
+ parentInstance = ReactTestUtils.renderIntoDocument(<Parent />);
611
+ expect(childInstance).toBeNull();
612
+
613
+ expect(parentInstance.state.flag).toBe(false);
614
+ ReactUpdates.batchedUpdates(function() {
615
+ parentInstance.setState({flag: true});
616
+ });
617
+ expect(parentInstance.state.flag).toBe(true);
618
+
619
+ expect(console.warn.argsForCall.length).toBe(0);
620
+
621
+ reactComponentExpect(childInstance).scalarContextEqual({foo: 'bar', depth: 0});
622
+ });
623
+
624
it('warn if context keys differ', function() {
625
var Component = React.createClass({
626
contextTypes: {