javascript - 将 Prop 传递给普通 child

Question

有没有办法将 props 传递给通用子组件(不是您预先知道的组件)？

让 Wrapper 能够将 foo 传递给 child 的东西。

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 的内容。事实上，你不能将 props 直接传递给 children 因为 children 不是 React 组件。要使其正常工作，您需要通过子项进行映射，并为每个可迭代项传递您的 Prop 。

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

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

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

你需要使用 React.Children.map 静态函数以及 React.cloneElement 来让它工作:

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

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

---

您的示例代码将如下所示

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