Question

我对反应很新（实际上是三天）。我想构建一个组件，根据策略（由组件实现）和某些子属性来布置其子组件。一些属性在创建时作为道具直接传递给子节点;一些其他属性，例如其尺寸，是每个孩子固有的。也就是说，此布局组件将使用如下：

<Layout>
    <Child1 propx=... propy=...>...</Child1>
    <Child2 propz=...>...</Child2>
    ...
</Layout>

并且孩子的位置将取决于propx，propy，propz，......和孩子的大小。

嗯，Layout组件需要知道其子道具的值及其大小。起初，我给了孩子们一个方法＆＃39; getProperties＆＃39;返回相关属性，我在React.Children.forEach（this.props.children，fn）中调用了该方法但是我发现传递给fn的对象不是组件实例，因此我无法在其上调用getProperties。然后我尝试为每个Layout子项传递一个额外的属性＆＃39; uploadProperties＆＃39;带有一个回调，由孩子调用，告诉布局需要知道什么。我知道我不能在孩子们中调用setProps，所以我想出了这个：

var Layout = React.createClass({
    storeChildProperties: function (properties) {
        this.childData = this.childData || [];
        this.childData.push(properties);
    },
    render: function () {
        var self = this;
        var children = [];
        React.Children.forEach(this.props.children, function (child) {
            var clone = React.addons.cloneWithProps(
                child,
                {key: child.props.key, uploadProperties: self.storeChildProperties});
            children.push(clone);
        });
        this.props.children = children;
        return <div>{this.props.children}</div>;
    }
}

它似乎有效，但我对两件事情感到不安。首先，我不喜欢附上“childData＆＃39;到布局实例（我不知道在哪里放置它）。其次，我不知道是否可以替换this.props.children。实际上，即使我不是，我也只是

return <div>{children}</div>;

无论如何，这是从儿童那里获取信息的合理方式吗？

Answer 1

您可以通过this.props.children[0].props访问儿童道具。

如何从孩子那里获取信息

1 个答案: