2015-05-19 80 views
12

我在React中遇到了一個非常惱人的行爲。我想使用getChildContext將上下文從父組件傳遞給子組件。一切正常,只要我不在渲染函數中使用{this.props.children}。如果我這樣做,子組件的上下文是未定義的。當孩子使用this.props.children呈現時,反應上下文是不確定的

我附上重現此行爲的代碼示例。我不知道爲什麼組件Bazbar上下文是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/

回答

12

這樣看來,所有的組件獲得創建他們的孩子上下文。在這種情況下,<Baz />作爲Foo的一部分創建,所以它從Foo獲取子上下文,這就是未定義的原因。

幾個選項。

1)在Foo上設置子上下文。
2)在Bar重新創建<Baz>孩子。你可以用cloneWithProps來做到這一點。

render: function() { 
    console.log(this); 
    return React.addons.cloneWithProps(this.props.children) 
} 

更新小提琴:在反應項目https://jsfiddle.net/crob611/3h7pxnkx/2/

問題討論這個問題:https://github.com/facebook/react/issues/3392

+3

只是值得注意的是,作爲警告表示,該計劃是,這種行爲將被改變作出反應v0.14所以'Baz'將從其父'Bar'而不是它的所有者'Foo'獲取它的上下文。 –

相關問題