Warn if context values differ, related to issue #2112
This commit is contained in:
parent
b2ace55d9d
commit
90d75ab099
|
@ -597,16 +597,34 @@ var ReactCompositeComponentMixin = assign({},
|
||||||
_warnIfContextsDiffer: function(ownerBasedContext, parentBasedContext) {
|
_warnIfContextsDiffer: function(ownerBasedContext, parentBasedContext) {
|
||||||
var ownerKeys = Object.keys(ownerBasedContext).sort();
|
var ownerKeys = Object.keys(ownerBasedContext).sort();
|
||||||
var parentKeys = Object.keys(parentBasedContext).sort();
|
var parentKeys = Object.keys(parentBasedContext).sort();
|
||||||
warning(
|
var displayName = this._instance.constructor.displayName || 'ReactCompositeComponent';
|
||||||
ownerKeys.length === parentKeys.length &&
|
if (ownerKeys.length !== parentKeys.length ||
|
||||||
ownerKeys.toString() === parentKeys.toString(),
|
ownerKeys.toString() !== parentKeys.toString()) {
|
||||||
'owner based context (keys: %s) does not equal parent based' +
|
warning(
|
||||||
' context (keys: %s) while mounting %s' +
|
ownerKeys.length === parentKeys.length &&
|
||||||
' (see: http://fb.me/react-context-by-parent)',
|
ownerKeys.toString() === parentKeys.toString(),
|
||||||
Object.keys(ownerBasedContext),
|
'owner based context (keys: %s) does not equal parent based ' +
|
||||||
Object.keys(parentBasedContext),
|
'context (keys: %s) while mounting %s ' +
|
||||||
(this._instance.constructor.displayName || 'ReactCompositeComponent')
|
'(see: http://fb.me/react-context-by-parent)',
|
||||||
);
|
Object.keys(ownerBasedContext),
|
||||||
|
Object.keys(parentBasedContext),
|
||||||
|
displayName
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
for (key in parentKeys) {
|
||||||
|
var key = parentKeys[key];
|
||||||
|
warning(
|
||||||
|
ownerBasedContext[key] === parentBasedContext[key],
|
||||||
|
'owner-based and parent-based contexts differ ' +
|
||||||
|
'(values: `%s` vs `%s`) for key (%s) while mounting %s ' +
|
||||||
|
'(see: http://fb.me/react-context-by-parent)',
|
||||||
|
ownerBasedContext[key],
|
||||||
|
parentBasedContext[key],
|
||||||
|
key,
|
||||||
|
displayName
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1009,7 +1009,7 @@ describe('ReactCompositeComponent', function() {
|
||||||
reactComponentExpect(grandchildInstance).scalarContextEqual({foo: 'bar', depth: 1});
|
reactComponentExpect(grandchildInstance).scalarContextEqual({foo: 'bar', depth: 1});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('warn if contexts differ', function() {
|
it('warn if context keys differ', function() {
|
||||||
var Component = React.createClass({
|
var Component = React.createClass({
|
||||||
contextTypes: {
|
contextTypes: {
|
||||||
foo: ReactPropTypes.string.isRequired
|
foo: ReactPropTypes.string.isRequired
|
||||||
|
@ -1033,6 +1033,47 @@ describe('ReactCompositeComponent', function() {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('warn if context values differ', function() {
|
||||||
|
var Parent = React.createClass({
|
||||||
|
childContextTypes: {
|
||||||
|
foo: ReactPropTypes.string
|
||||||
|
},
|
||||||
|
|
||||||
|
getChildContext: function() {
|
||||||
|
return {
|
||||||
|
foo: "bar"
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
return <div>{this.props.children}</div>;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var Component = React.createClass({
|
||||||
|
contextTypes: {
|
||||||
|
foo: ReactPropTypes.string.isRequired
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
return <div />;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var component = React.withContext({foo: 'noise'}, function() {
|
||||||
|
return <Component />
|
||||||
|
});
|
||||||
|
|
||||||
|
ReactTestUtils.renderIntoDocument(<Parent>{component}</Parent>);
|
||||||
|
|
||||||
|
expect(console.warn.mock.calls.length).toBe(2);
|
||||||
|
expect(console.warn.mock.calls[0][0]).toBe(
|
||||||
|
'Warning: owner-based and parent-based contexts differ ' +
|
||||||
|
'(values: `noise` vs `bar`) for key (foo) while mounting Component ' +
|
||||||
|
'(see: http://fb.me/react-context-by-parent)'
|
||||||
|
);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
it('should check context types', function() {
|
it('should check context types', function() {
|
||||||
var Component = React.createClass({
|
var Component = React.createClass({
|
||||||
contextTypes: {
|
contextTypes: {
|
||||||
|
|
Loading…
Reference in New Issue