Question

我正在使用反应，我正在尝试将道具/背景传递给我的动态儿童，由dymamic儿童我的意思是儿童使用

渲染

{this.props.children}

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

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

Answer 1

没有一个很好的方法可以做到这一点很清楚并且传递父项的所有属性并不是一个很好的模式，如果不仔细（并且有很好的文档），可能会导致一些非常难以遵循的代码。如果你有一个属性的子集，它很简单：

JsFiddle

假设您正在使用React和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

Answer 2

在DOM元素上传播道具

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

当我们传播道具时，我们会冒着添加未知HTML的风险属性，这是一种不好的做法。

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

我怎样才能将道具/背景传递给动态儿童？

2 个答案: