React.js中的嵌套注释

Z时代
2024-01-10
分类：问答

我有以下json：

{ "comments":[ { "id":1, "comment_text":"asdasdadasdsadsadadsa", "author":"adsfasdasdsad", "post_id":1, "ancestry":null, "archived":false, "created_at":"2014-10-16T23:16:44.173Z", "updated_at":"2014-10-16T23:16:44.173Z", "is_moderated":false, "avatar_url":null, "slug":null, "blog_id":2, "children":[ ] }, { "id":2, "comment_text":"idlsfghlskdhvbsldfhjdslifds\nzf\ndsf\nds\nf\ns\nf\ns\nfds\nfsdjghfsdligjhsepfiguhefdliguhefldiughfeliughnfesg\nf\nsg\ns\ng\ns\ndf\nsd\nf\nsdgsofughlefidughls;uhgsuhg.vskjfhglsiuhg.sfv", "author":"asdsdasdad", "post_id":1, "ancestry":null, "archived":false, "created_at":"2014-10-16T23:17:02.270Z", "updated_at":"2014-10-16T23:17:02.270Z", "is_moderated":false, "avatar_url":null, "slug":null, "blog_id":2, "children":[ { "id":3, "comment_text":"fdsfdsfdsfsdfsfsdf", "author":"sdfdsfdsfdsfds", "post_id":1, "ancestry":"2", "archived":false, "created_at":"2014-11-28T17:39:47.059Z", "updated_at":"2014-11-28T17:39:47.059Z", "is_moderated":false, "avatar_url":null, "slug":null, "blog_id":2, "children":[ { "id":4, "comment_text":"fdsfdsfdsdsfdsfds", "author":"sdfsdfdsfsdfdsfds", "post_id":1, "ancestry":"2/3", "archived":false, "created_at":"2014-11-28T17:39:53.049Z", "updated_at":"2014-11-28T17:39:53.049Z", "is_moderated":false, "avatar_url":null, "slug":null, "blog_id":2, "children":[ { "id":5, "comment_text":"sdfdsfdsfdsfdssdfsdfdsfdsfdsfds", "author":"sdfsdfdsfdsfdsf", "post_id":1, "ancestry":"2/3/4", "archived":false, "created_at":"2014-11-28T17:40:02.032Z", "updated_at":"2014-11-28T17:40:02.032Z", "is_moderated":false, "avatar_url":null, "slug":null, "blog_id":2, "children":[ ] } ] } ] } ] } ] }

如您所见，其中一些注释包含一个children: []注释。我需要基于此键在Reactjs中创建嵌套注释。

我能够以一种非常混乱的jquery方式来做到这一点，但是使用React我想摆脱jquery并创建一个嵌套注释的纯React基础。

有人知道任何示例，想法或方式吗？到目前为止，我有：

var Comments = React.createClass({
  render: function() {
    <div>
      <ul>
        <li>sample</li>
      </ul>
      {this.props.children}
    </div>
  }
});

我的想法是遍历评论，并说他们是否有孩子，然后再创建另一个评论，例如

for (var i = 0; i < comments.length; i++) {
  <Comments>
   if (children) {
     <Comments></Comments>
   }
  </Comments>
}

但这确实无法工作，我可以将其封装在一个函数中并说：

comments: function(comments){
    for (var i = 0; i < comments.length; i++) {
      <Comments>
       if (children) {
         this.comments(comments);
       }
      </Comments>
    }
}

我在正确的轨道附近吗？

回答：

您需要两个组件：评论和评论。

Comment = React.createClass({
  render: function(){
    var comment = this.props.comment;
    return <div>
      <p>{comment.author} says {comment.comment_text}</p>
      <Comments comments={comment.children} />
    </div>
  }
});
Comments = React.createClass({
  render: function(){
    return <div>
      {this.props.comments.map(function(comment){
        return <Comment key={comment.id} comment={comment} />
      })
    </div>
  }
});