IT技术 - 组件如何对其子组件进行布局？ - 吾爱随笔录

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

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

好吧，Layout 不拥有孩子，所以它不能修改他们的props。它也不能克隆孩子，因为他们可能包含引用。布局可以将每个孩子包装在（正确定位的）div 中吗？具有 ref 的孩子会导致 SomeComponent refs 的正确更新吗？有没有更好的方法来做到这一点？

我对亲子沟通的一般问题想得更多了，我比以前更困惑了。文档指出：

“亲子交流，简单传递props。”

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

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

那么，什么给？在我看来，只有所有者，而不是父母，才能设置 props。

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

我完全糊涂了。

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