Ngữ cảnh phản ứng là không xác định khi trẻ em được trả lại bằng cách sử dụng this.props.children

Question

Tôi đang đối mặt với một hành vi thực sự gây phiền nhiễu trong React. Tôi muốn chuyển ngữ cảnh từ thành phần gốc sang thành phần con bằng cách sử dụng getChildContext. Mọi thứ hoạt động tốt miễn là tôi không sử dụng {this.props.children} trong hàm render. Nếu tôi làm như vậy, bối cảnh của thành phần trẻ em là không xác định.

Tôi đang gắn một ví dụ mã để tái tạo hành vi này. Tôi không thể tìm ra lý do tại sao các tờ khai bar của bối cảnh của các thành phần Baz là 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); 

điều khiển Output:

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

Vì vậy, có vẻ như tất cả các thành phần có được bối cảnh con của nơi họ được tạo ra. Trong trường hợp này, <Baz /> được tạo như một phần của Foo, do đó, nó sẽ nhận được ngữ cảnh con từ Foo, đó là lý do tại sao nó không được xác định.

Hai tùy chọn.

1) Đặt ngữ cảnh con trên Foo.
2) Tạo lại số <Baz> con trong Bar. Bạn có thể làm điều này với cloneWithProps.

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

fiddle Cập nhật: https://jsfiddle.net/crob611/3h7pxnkx/2/

Issue trên phản ứng dự án thảo luận: https://github.com/facebook/react/issues/3392