When we mount a Parent component which contains a Child component with context values,
if we don't specify contextTypes for Parent,
The context values provide to children will be undefined.
const Child = React.createClass({
contextTypes: {
translate: React.PropTypes.func
},
render() {
// this.context.translate === undefined
// expect this.context.translate to be a function
const { translate } = this.context;
return <span>{ translate('child') }</span>;
}
});
const Parent = React.createClass({
// if we specify contextTypes in Parent level
// then in child level the context.translate would be a function
// contextTypes: {
// translate: React.PropTypes.func
// },
render() {
return (
<div>
<span>parent</span>
<Child />
</div>
);
}
});
mount(<Parent />, { context: { translate: a => a } });
Appreciate for your help,
Ah, noticed a optional option called childContextTypes, after providing that to the mount it works.
mount(<Parent />, {
context: { translate: a => a },
childContextTypes: {
translate: React.PropTypes.func
}
});
Most helpful comment
Ah, noticed a optional option called
childContextTypes, after providing that to the mount it works.