将道具传递给普通孩子

Question

有没有办法将道具传递给通用子组件（不是您预先知道的组件）？

一些能够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>
        )
    }
});

jsfiddle

Answer 1

想象一下 JavaScript 代码

this.props.children foo=2

这就是你的表达式从 JSX 转换为普通 JS 的内容。事实上，你不能children直接传递 props，因为children它不是 React 组件。为了使其工作，您需要映射子项并传递每个可迭代项的道具。

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

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

因为，首先，您将收到 TypeError 因为map未定义，其次，您将丢失每个孩子的所有初始道具。

您需要使用React.Children.map静态函数并React.cloneElement使其正常工作：

React.Children.map(children, child => React.cloneElement(child, {
  foo: 2
}))

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

您的示例代码将如下所示

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>
        );
    }
});