javascript - React js 组成

Question

我是 React 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>
        );
    }
});

调用 < Author/> 和 < Comment/> 返回 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>

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

有什么想法吗？谢谢!

Answer 1

您应该使用某种层次结构，例如，将评论 block 作为作者 block 的一部分，如果您有多个作者，则将作者 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的设计意图将数据从顶层(作者)发送到下一层