我正在使用反应,我正在尝试将道具/上下文传递给我的动态孩子,
童话儿童我的意思是孩子们使用渲染
童话儿童我的意思是孩子们使用渲染
{this.props.children}
如何传递给这个孩子(在我的代码中我知道它的类型)上下文/道具?
在这个jsbin中有一个例子,它不适用于动态儿童.
http://jsbin.com/puhilabike/1/edit?html,output
解决方法
@H_403_13@ 没有一个很好的方式来做到这一点很清楚,并且传递所有的父级属性不是一个很好的模式,如果没有仔细地(和优秀的文档),可能会导致一些非常困难的代码.如果你有一个子集的属性,它是直接的:假设您使用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