Контекст взаимодействия undefined, когда дети отображаются с помощью this.props.children

Я сталкиваюсь с действительно раздражающим поведением в React. Я хотел бы передать контекст из родительского компонента дочернему компоненту с помощью getChildContext. Все работает нормально, пока я не использую {this.props.children} в функции рендеринга. Если я это сделаю, контекст дочернего компонента undefined.

Я присоединяю пример кода, который воспроизводит это поведение. Я не могу понять, почему bar, поданный из контекста компонента Baz, 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/

Ответ 1