我正在使用反应,我正在尝试将道具/上下文传递给我的动态孩子,
童话儿童我的意思是孩子们使用渲染
童话儿童我的意思是孩子们使用渲染
{this.props.children}
如何传递给这个孩子(在我的代码中我知道它的类型)上下文/道具？
在这个jsbin中有一个例子,它不适用于动态儿童.
http://jsbin.com/puhilabike/1/edit?html,output
解决方法
没有一个很好的方式来做到这一点很清楚,并且传递所有的父级属性不是一个很好的模式,如果没有仔细地(和优秀的文档),可能会导致一些非常困难的代码.如果你有一个子集的属性,它是直接的：
假设您使用React with Addons,您可以克隆React组件的子项,并在其上设置新的属性值.在这里,代码只是将一个名为parentValue的属性复制到每个孩子中.在创建子元素时,需要创建每个元素的克隆.
var Hello = React.createClass({
render: function() {
var self = this;
var renderedChildren = React.Children.map(this.props.children,function(child) {
// create a copy that includes addtional property values
// as needed
return React.addons.cloneWithProps(child,{ parentValue: self.props.parentValue } );
});
return (<div>
{ renderedChildren }
</div>)
;
}
});
var SimpleChild = React.createClass({
render: function() {
return <div>Simple { this.props.id },from parent={ this.props.parentValue }</div>
}
});
React.render((<Hello parentValue="fromParent">
<SimpleChild id="1" />
<SimpleChild id="2" />
</Hello>),document.body);
生产：
Simple 1,from parent=fromParent Simple 2,from parent=fromParent
