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

                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

ご覧のとおり、一部のコメントには of 個のコメントが含まれてい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>
    }
}

私はどこか正しい軌道に乗っていますか?