Контекст взаимодействия 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

Итак, кажется, что все компоненты получают дочерний контекст того, где они созданы. В этом случае <Baz /> создается как часть Foo, поэтому он получает дочерний контекст из Foo, поэтому он undefined.

Пара вариантов.

1) Установите дочерний контекст на Foo.
2) Восстановите дочерний элемент <Baz> в Bar. Вы можете сделать это с помощью 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