Eliminate context warnings when component isn't reading the conflicting context variable.
Jim committed
Jan 13, 2015 at 15:32 UTC
8aa6171fd6628b3b6d1fc9931c677533b587ba5d
2 files changed
+36
-53
src/core/ReactCompositeComponent.js
+29
-24
@@ -457,13 +457,13 @@ var ReactCompositeComponentMixin = assign({},
457
458
/**
459
* Filters the context object to only contain keys specified in
460
- * `contextTypes`, and asserts that they are valid.
460
+ * `contextTypes`
461
*
462
* @param {object} context
463
* @return {?object}
464
* @private
465
*/
466
- _processContext: function(context) {
466
+ _maskContext: function(context) {
467
var maskedContext = null;
468
var contextTypes = this._instance.constructor.contextTypes;
469
if (!contextTypes) {
@@ -473,6 +473,23 @@ var ReactCompositeComponentMixin = assign({},
473
for (var contextName in contextTypes) {
474
maskedContext[contextName] = context[contextName];
475
}
476
+ return maskedContext;
477
+ },
478
+
479
+ /**
480
+ * Filters the context object to only contain keys specified in
481
+ * `contextTypes`, and asserts that they are valid.
482
+ *
483
+ * @param {object} context
484
+ * @return {?object}
485
+ * @private
486
+ */
487
+ _processContext: function(context) {
488
+ var maskedContext = this._maskContext(context);
489
+ var contextTypes = this._instance.constructor.contextTypes;
490
+ if (!contextTypes) {
491
+ return emptyObject;
492
+ }
493
if (__DEV__) {
494
this._checkPropTypes(
495
contextTypes,
@@ -648,35 +665,23 @@ var ReactCompositeComponentMixin = assign({},
665
* TODO: Remove this check when owner-context is removed
666
*/
667
_warnIfContextsDiffer: function(ownerBasedContext, parentBasedContext) {
668
+ ownerBasedContext = this._maskContext(ownerBasedContext);
669
+ parentBasedContext = this._maskContext(parentBasedContext);
670
var ownerKeys = Object.keys(ownerBasedContext).sort();
671
var parentKeys = Object.keys(parentBasedContext).sort();
672
var displayName = this.getName() || 'ReactCompositeComponent';
654
- if (ownerKeys.length !== parentKeys.length ||
655
- ownerKeys.toString() !== parentKeys.toString()) {
673
+ for (var i = 0; i < parentKeys.length; i++) {
674
+ var key = parentKeys[i];
675
warning(
657
- ownerKeys.length === parentKeys.length &&
658
- ownerKeys.toString() === parentKeys.toString(),
659
- 'owner based context (keys: %s) does not equal parent based ' +
660
- 'context (keys: %s) while mounting %s ' +
676
+ ownerBasedContext[key] === parentBasedContext[key],
677
+ 'owner-based and parent-based contexts differ ' +
678
+ '(values: `%s` vs `%s`) for key (%s) while mounting %s ' +
679
'(see: http://fb.me/react-context-by-parent)',
662
- Object.keys(ownerBasedContext),
663
- Object.keys(parentBasedContext),
680
+ ownerBasedContext[key],
681
+ parentBasedContext[key],
682
+ key,
683
displayName
684
);
666
- } else {
667
- for (var i = 0; i < parentKeys.length; i++) {
668
- var key = parentKeys[i];
669
- warning(
670
- ownerBasedContext[key] === parentBasedContext[key],
671
- 'owner-based and parent-based contexts differ ' +
672
- '(values: `%s` vs `%s`) for key (%s) while mounting %s ' +
673
- '(see: http://fb.me/react-context-by-parent)',
674
- ownerBasedContext[key],
675
- parentBasedContext[key],
676
- key,
677
- displayName
678
- );
679
- }
685
}
686
},
687
src/core/__tests__/ReactCompositeComponent-test.js
+7
-29
@@ -581,16 +581,11 @@ describe('ReactCompositeComponent', function() {
581
582
// Two warnings, one for the component and one for the div
583
// We may want to make this expect one warning in the future
584
- expect(console.warn.mock.calls.length).toBe(2);
584
+ expect(console.warn.mock.calls.length).toBe(1);
585
expect(console.warn.mock.calls[0][0]).toBe(
586
- 'Warning: owner based context (keys: foo) does not equal parent based ' +
587
- 'context (keys: ) while mounting Component ' +
588
- '(see: http://fb.me/react-context-by-parent)'
589
- );
590
- expect(console.warn.mock.calls[1][0]).toBe(
591
- 'Warning: owner based context (keys: foo) does not equal parent based ' +
592
- 'context (keys: ) while mounting ReactCompositeComponent ' +
593
- '(see: http://fb.me/react-context-by-parent)'
586
+ 'Warning: owner-based and parent-based contexts differ '+
587
+ '(values: `bar` vs `undefined`) for key (foo) '+
588
+ 'while mounting Component (see: http://fb.me/react-context-by-parent)'
589
);
590
591
});
@@ -629,17 +624,12 @@ describe('ReactCompositeComponent', function() {
624
625
// Two warnings, one for the component and one for the div
626
// We may want to make this expect one warning in the future
632
- expect(console.warn.mock.calls.length).toBe(2);
627
+ expect(console.warn.mock.calls.length).toBe(1);
628
expect(console.warn.mock.calls[0][0]).toBe(
629
'Warning: owner-based and parent-based contexts differ ' +
630
'(values: `noise` vs `bar`) for key (foo) while mounting Component ' +
631
'(see: http://fb.me/react-context-by-parent)'
632
);
638
- expect(console.warn.mock.calls[1][0]).toBe(
639
- 'Warning: owner-based and parent-based contexts differ ' +
640
- '(values: `noise` vs `bar`) for key (foo) while mounting ReactCompositeComponent ' +
641
- '(see: http://fb.me/react-context-by-parent)'
642
- );
633
634
});
635
@@ -686,18 +676,12 @@ describe('ReactCompositeComponent', function() {
676
677
// Two warnings, one for the component and one for the div
678
// We may want to make this expect one warning in the future
689
- expect(console.warn.mock.calls.length).toBe(2);
679
+ expect(console.warn.mock.calls.length).toBe(1);
680
expect(console.warn.mock.calls[0][0]).toBe(
681
'Warning: owner-based and parent-based contexts differ ' +
682
'(values: `noise` vs `bar`) for key (foo) while mounting Component ' +
683
'(see: http://fb.me/react-context-by-parent)'
684
);
695
- expect(console.warn.mock.calls[1][0]).toBe(
696
- 'Warning: owner-based and parent-based contexts differ ' +
697
- '(values: `noise` vs `bar`) for key (foo) while mounting ReactCompositeComponent ' +
698
- '(see: http://fb.me/react-context-by-parent)'
699
- );
700
-
685
});
686
687
it('should warn if context values differ on update using wrapper', function() {
@@ -746,18 +730,12 @@ describe('ReactCompositeComponent', function() {
730
731
// Two warnings, one for the component and one for the div
732
// We may want to make this expect one warning in the future
749
- expect(console.warn.mock.calls.length).toBe(2);
733
+ expect(console.warn.mock.calls.length).toBe(1);
734
expect(console.warn.mock.calls[0][0]).toBe(
735
'Warning: owner-based and parent-based contexts differ ' +
736
'(values: `noise` vs `bar`) for key (foo) while mounting Component ' +
737
'(see: http://fb.me/react-context-by-parent)'
738
);
755
- expect(console.warn.mock.calls[1][0]).toBe(
756
- 'Warning: owner-based and parent-based contexts differ ' +
757
- '(values: `noise` vs `bar`) for key (foo) while mounting ReactCompositeComponent ' +
758
- '(see: http://fb.me/react-context-by-parent)'
759
- );
760
-
739
});
740
741
it('unmasked context propagates through updates', function() {