反应js组合

Posted 2023-02-22

【中文标题】反应js组合

【英文标题】：React js composition

【发布时间】：2015-08-20 04:37:48

【问题描述】：

我是响应 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)。

有什么想法吗？谢谢！

【问题讨论】：

我不明白你想要达到的目标。您是否想从服务器获取数据（您收到一个包含 cmets 的对象，其中包含作者和评论值？并且您想将这些值相应地分配给作者和评论？您能更具体一点吗？

嗨rmuller，我尝试将两个ajax结果的值混合在一个显示html的对象中，即用户照片，评论标题，由用户名发布，阅读x次跨度>

【参考方案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 的设计将数据从***（作者）发送到下一个级别

【讨论】：

好的，谢谢 arkoak，+1 的层次结构。如果我有多个要返回的评论元素，即 评论标题，由用户名发布，阅读 x 次，关于如何做到这一点的想法？谢谢！

请检查：***.com/a/28320488/724913，jsfiddle 有一个数据数组，用于循环和显示所有数据。你需要对 cme​​ts 做同样的事情作为你的数据数组