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":[  

                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

如您所见，一些 cmets 包含一个 children: [] 的 cmets。我需要根据这个键在 Reactjs 中创建嵌套的 cmets。

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

有人知道任何例子、想法或方法吗？到目前为止我所拥有的是：

var Comments = React.createClass({

  render: function() {
    <div>
      <ul>
        <li>sample</li>
      </ul>
      {this.props.children}
    </div>
  }

});

我的想法是遍历 cmets 并说如果他们有孩子，只需创建另一个类似的评论

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

Comment 渲染 Comments，而 Comments 又可以渲染 Comment 节点等。这递归地构建了评论结构。

Answer 2

如果你让一个组件负责递归地渲染它自己的子组件，这会更容易做到：

var Comment = React.createClass({
  render() {
    var comment = this.props.comment
    return <div>
      <div dangerouslySetInnerHTML={{__html: comment.comment_text}}/>
      {comment.children.length > 0 && comment.children.map((child) => {
        return <Comment key={child.id} comment={child}/>
      })}
    </div>
  }
})

• Live JS Bin example

如果您想在不嵌套组件的情况下执行此操作，因此您只是呈现<Comment>s 的平面列表，您可以首先将 cmets 树线性化为列表，例如

function flattenComments(comments, flatComments, level) {
  for (var i = 0, l = comments.length; i < l; i++) {
    var comment = comments[i]
    flatComments.push({comment: comment, level: level})
    if (comment.children.length > 0) {
      flattenComments(comment.children, flatComments, level + 1)
    }
  }
}

var flatComments = []
flattenComments(comments, flatComments, 0)
var renderedComments = flatComments.map((props) => {
  return <Comment {...props}/>
})