javascript – 如何通过道具/上下文到动态孩子的反应？

我正在使用反应,我正在尝试将道具/上下文传递给我的动态孩子,
童话儿童我的意思是孩子们使用渲染

{this.props.children}

如何传递给这个孩子(在我的代码中我知道它的类型)上下文/道具？

在这个jsbin中有一个例子,它不适用于动态儿童.
http://jsbin.com/puhilabike/1/edit?html,output

解决方法

没有一个很好的方式来做到这一点很清楚,并且传递所有的父级属性不是一个很好的模式,如果没有仔细地(和优秀的文档),可能会导致一些非常困难的代码.如果你有一个子集的属性,它是直接的：

JsFiddle

假设您使用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