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因为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
}))

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

您的示例代码将如下所示

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

将道具传递给通用儿童

1 个答案: