Javascript 向普通儿童传递道具

有没有办法将道具传递给一般儿童（而不是您事先知道的组件）

使

Wrapper

能够将

foo

传递给孩子的东西

var Wrapper = React.createClass({
    render: function () {
        return <div>
            {this.props.children foo={2}} 
        </div>

    }
});

var App = React.createClass({
    render: function () {
        return (
            <Wrapper>
                {this.props.foo}
            </Wrapper>
        )
    }
});

var Wrapper=React.createClass({
渲染：函数（）{
返回
{this.props.children foo={2}}
}
});
var App=React.createClass({
渲染：函数（）{
返回(
{this.props.foo}
)
}
});

---

想象一下Javascript代码

this.props.children foo=2

这就是将表达式从JSX传输到普通JS的过程。事实上，您不能直接将道具传递给

儿童

，因为

儿童

不是React组件。为了让它发挥作用，你需要在孩子们之间绘制地图，并在每一个iterable项目上传递你的道具

接下来的问题是，你不能简单地

this.props.children.map(child => (
  <Child foo={2} />
))

这样，每个子元素都会保留它自己从父元素传递的道具，并且除了它们之外，还会接收您定义的新道具。小心点，因为你可能无意中也重新定义了一些道具的值

---

您的示例代码如下所示

var Wrapper = React.createClass({
    render: function () {
        const {
            foo
        } = this.props;

        return (
            <div>
                {React.Children.map(this.props.children, child => React.cloneElement(child, {
                    foo
                }))}
            </div>
        );
    }
});

var App = React.createClass({
    render: function () {
        return (
            <Wrapper foo={2}>
                <div>I should be a component</div>
                <div>I should be a component, too</div>
                <div>We all should be components</div>
            </Wrapper>
        );
    }
});

var Wrapper=React.createClass({
渲染：函数（）{
常数{
福
}=这是道具；
返回(
{React.Children.map（this.props.Children，child=>React.cloneElement（child{
福
}))}
);
}
});
var App=React.createClass({
渲染：函数（）{
返回(
我应该是一个组件
我也应该是一个组成部分
我们都应该成为一个整体
);
}
});

非常有意义。谢谢！

var Wrapper = React.createClass({
    render: function () {
        const {
            foo
        } = this.props;

        return (
            <div>
                {React.Children.map(this.props.children, child => React.cloneElement(child, {
                    foo
                }))}
            </div>
        );
    }
});

var App = React.createClass({
    render: function () {
        return (
            <Wrapper foo={2}>
                <div>I should be a component</div>
                <div>I should be a component, too</div>
                <div>We all should be components</div>
            </Wrapper>
        );
    }
});