Question

我已经和React玩了几个星期了，所以我离专家很远。这就是问题所在：我正在构建一些布局孩子的组件。也就是说，Layout可以用作：

var SomeComponent = React.createClass({
    render: function () {
        return (
            <Layout>
                <...child 1/>
                <...child 2/>
                ...
            </Layout>
        );
    }
});

嗯，布局不拥有孩子，所以它不能修改他们的道具。它也无法克隆孩子，因为它们可能包含refs。布局可以将每个孩子包裹在（正确定位的）div中吗？带有引用的孩子会导致SomeComponent引用的正确更新吗？有没有更好的方法呢？

我想到了关于亲子沟通的一般问题，我比以前更加困惑。文档说明：

＆＃34;对于亲子沟通，只需传递道具。＆＃34;

在文档的相关部分，我们发现：

＆＃34;在React中，所有者是设置其他组件的道具的组件。＆＃34;

那么，是什么给出的？在我看来，只有所有者，而不是父母，可以设置道具。

这已在几篇文章中讨论，但我找不到令人满意的答案。一些答案建议克隆父母的孩子，但如果原所有者在其所有者＆＃34;中设置了ref道具，我们就会遇到问题。在上面的示例中，SomeComponent拥有作为子项传递给Layout的组件。如果我在布局中克隆子项（比如，添加回调），布局将成为克隆的所有者，因此SomeComponent引用将无法获取它们。

我完全糊涂了。

Answer 1

我不完全确定你要问的是什么，但有些事情像<Layout />这样的包装组件可以对孩子做。

你提到你想要将每个子组件包装在一个div中。这是一个例子：

var Layout = React.createClass({
    render: function() {
        var children = [];
        if (this.props.children) {
            for (var i=0; i < this.props.children.length; i++) {
                var child = this.props.children[i];
                children.push(
                    <div className="child-container">
                        {child}
                    </div>
                );
            }
        }

        return (
            <div className="layout-container">
                {children}
            </div>
        );
    }
});

上面你可以看到你可以访问Layout中this.props.children的子项，这只是一个子组件数组。因此，通过使用如上所述的简单for循环，或使用this.props.children.map，您可以随意包装每个孩子并进行渲染。

组件如何对其子项进行布局？

1 个答案: