javascript - Reactjs 中的嵌套注释

Question

我有以下 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>
  }

});

我的想法是循环评论并说如果他们有 child 就创建另一个评论，比如

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

我是否接近正确的轨道？

Answer 1

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

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

评论呈现评论，评论又可以呈现评论节点等。这递归地构建评论结构。