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

我已经使用 React 几个星期了，所以我还远不​​是专家。这就是问题所在：我正在构建一些布局其子组件的组件。这是一个Layout可以这样使用：

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

好吧，布局不拥有孩子，所以它不能修改他们的道具。它也不能克隆子级，因为它们可能包含引用。布局能否将每个子元素包装在（正确定位的）div 中？具有 ref 的子级会导致 SomeComponent ref 的正确更新吗？有更好的方法吗？

我更多地思考了亲子沟通这个普遍问题，也比以前更加困惑了。文档指出：

“亲子交流，只需传递道具即可。”

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

“在 React 中，所有者是设置其他组件的 props 的组件。”

那么，什么给出呢？在我看来，这只有所有者（而不是父级）可以设置道具.

这已经在几篇文章中讨论过，但我没有找到令人满意的答案。一些答案建议克隆父级中的子级，但是如果原始所有者在其“所有者”中设置 ref 属性，我们就会遇到问题。在上面的示例中，SomeComponent 拥有作为子级传递给 Layout 的组件。如果我在布局中克隆子级（例如，添加回调），则布局将成为克隆的所有者，因此 SomeComponent 引用将无法获取它们。

我完全困惑了。

我不完全确定你在问什么，但有些东西像你的包装组件<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 in this.props.children这只是一个子组件数组。因此，通过使用上面的简单 for 循环，或使用this.props.children.map您可以按照自己喜欢的方式包装每个子项并渲染它。