Çocuklar, this.props.children

Question

kullanılarak işlenirken tepki içeriği tanımlanmamıştır React'ta gerçekten rahatsız edici bir davranışla karşı karşıyayım. Bağlamı, üst bileşenden çocuk bileşenine getChildContext kullanarak geçirmek istiyorum. Her şey, render işlevinde {this.props.children} kullanmadığım sürece iyi çalışır. Bunu yaparsam, çocuk bileşeninin içeriği tanımsızdır.

Bu davranışı yeniden üreten bir kod örneği ekliyorum. Baz bileşeninin bağlamında neden dosyalanmış bar'un undefined olduğunu anlayamıyorum.

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

Konsol Çıktı:

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

Yani tüm bileşenlerini oluşturuldukları nerede çocuk bağlamını olsun görünür. Bu durumda <Baz />, Foo'un bir parçası olarak oluşturulur, bu nedenle, Foo'dan çocuk bağlamını alır, bu nedenle tanımlanmamıştır.

Seçeneklerin bir çift.

1) Çocuk bağlamını Foo olarak ayarlayın.
2) Bar'da <Baz> çocuğunu yeniden oluşturun. Bunu cloneWithProps ile yapabilirsiniz.

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

Güncelleme keman: projesini tepki üzerine https://jsfiddle.net/crob611/3h7pxnkx/2/

Sayı görüştükten: https://github.com/facebook/react/issues/3392