Kontekst reakcyjny jest niezdefiniowany, gdy dzieci są renderowane przy użyciu tego.props.children

Question

Mam do czynienia z naprawdę irytującym zachowaniem w React. Chciałbym przekazać kontekst z komponentu nadrzędnego do komponentu potomnego przy użyciu getChildContext. Wszystko działa dobrze, o ile nie używam {this.props.children} w funkcji renderowania. Jeśli to zrobię, kontekst komponentu potomnego jest niezdefiniowany.

Załączam przykład kodu, który odtwarza to zachowanie. Nie mogę się dowiedzieć, dlaczego kontekst komponentu jest kontekstem komponentu Baz, to jest .

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); 

konsoli wyjściowa:

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/

Answer 1

Wygląda więc na to, że wszystkie składniki się kontekst dziecięcą, gdzie są one tworzone. W tym przypadku <Baz /> jest tworzony jako część Foo, więc pobiera kontekst podrzędny z Foo, dlatego jest niezdefiniowany.

Kilka opcji.

1) Ustaw kontekst podrzędny na Foo.
2) Odtworzyć dziecko <Baz> w Bar. Możesz to zrobić za pomocą cloneWithProps.

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

Updated skrzypce: https://jsfiddle.net/crob611/3h7pxnkx/2/

Issue reagować na projekt omawiając go: https://github.com/facebook/react/issues/3392