12
我在React中遇到了一個非常惱人的行爲。我想使用getChildContext
將上下文從父組件傳遞給子組件。一切正常,只要我不在渲染函數中使用{this.props.children}
。如果我這樣做,子組件的上下文是未定義的。當孩子使用this.props.children呈現時,反應上下文是不確定的
我附上重現此行爲的代碼示例。我不知道爲什麼組件Baz
的bar
上下文是undefined
。
var Baz = React.createClass({
contextTypes: {
bar: React.PropTypes.any
},
render: function() {
console.log(this.context);
return <div />;
}
});
var Bar = React.createClass({
childContextTypes: {
bar: React.PropTypes.any
},
getChildContext: function() {
return {
bar: "BAR"
};
},
render: function() {
return (<div>{this.props.children}</div>);
}
});
var Foo = React.createClass({
render: function() {
return <Bar>
<Baz />
</Bar>;
}
});
console.log(React.version);
React.render(<Foo />, document.body);
控制檯輸出:
Warning: owner-based and parent-based contexts differ (values: `undefined` vs `BAR`) for key (bar) while mounting Baz (see: http://fb.me/react-context-by-parent)
Inline JSX script:10 Object {bar: undefined}
的jsfiddle: https://jsfiddle.net/3h7pxnkx/1/
只是值得注意的是,作爲警告表示,該計劃是,這種行爲將被改變作出反應v0.14所以'Baz'將從其父'Bar'而不是它的所有者'Foo'獲取它的上下文。 –