反应js组合

Question

我是响应 Js 的新手，并尝试了解如何对我通过 ajax 从不同来源获得的数据进行组合（如此处所述：Reactjs - loadResourcesFromServer - combine two sources）。

我有一个 Comment 对象和一个 Author 对象。

var Author = React.createClass({
    ...
    render: function() {
        return (
            <div><a>{this.state.data.username}</a><img src="{this.state.data.picture}" /></div>
        );
    }
});

var Comment = React.createClass({
    ...
    render: function() {
        return (
            <div><p>{this.state.title}</p></div>
        );
    }
});

调用 和 返回 2 个单独的 div，但我想显示类似

<div>
    <p>
        <img src="{this.state.data.picture}" />
        {this.state.title}, published by {this.state.data.username}
    </p> 
</div>

我尝试使用包装器

<CommentWithAuthor>
    <Author/>
    <Comment/>
</CommentWithAuthor>

但只能访问此包装器中对象的道具，而不能访问对象本身。我无法使用 refs，因为我需要一个新的渲染器 (React.js - access to component methods)。

有什么想法吗？谢谢！

Answer 1

您应该使用一些层次结构，例如，将评论块作为作者块的一部分，如果您有多个作者，则将作者 ID 传递给它，并根据作者选择评论

var Author = React.createClass({
    ...
    render: function() {
        return (
            <div><img src="{this.state.data.picture}" />
                 <comment authoriid={this.props.id}/>
                 <a>{this.state.data.username}</a>
            </div>
        );
    }
});

这样你就可以按照 reactjs 的设计将数据从顶级（作者）发送到下一个级别