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

呼叫＆lt;作者/＆gt;和＆lt;评论/＆gt;返回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>

但只能访问此包装器中对象的道具，而不能访问对象本身。我不能使用ref，因为我需要一个新的渲染器（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中的设计将数据从顶级（作者）发送到下一级别

反应js组成

1 个答案: