我怎样才能将 props/context 传递给反应中的动态儿童？

Question

我正在使用 React，我正在尝试将 props/context 传递给我的动态 childrens，通过动态 childrens 我的意思是 childrens 是使用

渲染的

{this.props.children}

我如何传递给这个 children（在我的代码中我知道它的类型）context/props？

在此 jsbin 中有一个示例，它不适用于动态 childrens。 http://jsbin.com/puhilabike/1/edit?html,js,output

Answer 1

没有一个很好的方法可以清楚地做到这一点，并且传递 parent 的所有属性不是一个很好的模式，如果不小心完成，可能会导致一些非常难以遵循的代码（并且具有出色的文档）。不过，如果您有属性的子集，那就很简单了：

JsFiddle

假设您使用 React with Addons，您可以克隆 React 组件的 children 并在其上设置新的属性值。在这里，代码只是将一个名为 parentValue 的属性复制到每个 child 中。它需要创建每个元素的克隆，因为 child 元素已经创建。

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

Answer 2

尽管@WiredPrairie 的回答是正确的，但从 React v0.13RC 开始，React.addons.cloneWithProps 已被弃用。更新的方法是使用 React.cloneElement。一个例子：

renderedChildren = React.Children.map(this.props.children, function (child) {
 return React.cloneElement(child, { parentValue: self.props.parentValue });
});

Answer 3

在 DOM 个元素上传播 props

https://github.com/vasanthk/react-bits/blob/master/anti-patterns/07.spreading-props-dom.md

When we spread props we run into the risk of adding unknown HTML attributes, which is a bad practice.

const Sample = () => (<Spread flag={true} domProps={{className: "content"}}/>);
const Spread = (props) => (<div {...props.domProps}>Test</div>);

我怎样才能将 props/context 传递给反应中的动态儿童？

How can I pass props/context to dynamic childrens in react?

javascript

reactjs

react-jsx