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并创建嵌套注释的纯反应基础。

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

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

我是否在正确的轨道附近？

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

注释呈现注释，反过来可以呈现注释节点等。这会递归地构建注释结构。

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>的平面列表，你可以先将注释树线性化为一个列表，例如

。

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

Reactjs中的嵌套注释

2 个答案: