cách render các thành phần con trong react.js đệ quy

Question

Tôi muốn đệ quy thêm một thành phần phản ứng từ bên trong thành phần riêng của nó. Tôi thấy ví dụ này của một tree component được ánh xạ thông qua TreeNodes con và thêm các nút con theo cùng một cách. Thật không may nó không làm việc ở tất cả cho tôi. Ý tưởng là có một thành phần bình luận đơn giản và các câu trả lời sẽ sử dụng lại cùng một thành phần.

var Comment = React.createClass({ 
    render: function() {  
    return (
     <div className="comment"> 

      {/* text and author */} 
      <div className="comment-text"> 
      <span className="author">{this.props.author}</span>   
      <span className="body" dangerouslySetInnerHTML={{__html: this.props.body}} /> 
      </div> 

      {/* replies */} 
      <div className="replies"> 
      { 
      this.props.replies.map(function(reply) { 
       <Comment body={reply.body} author={reply.author} /> 
      }.bind(this)) 
      } 
      </div> 

     </div> 
    ); 
    } 
}); 

tôi nhận được thông báo lỗi sau:

của router Lỗi Loại: Không 'Comment' để xây dựng: Vui lòng sử dụng các nhà điều hành 'mới', nhà xây dựng đối tượng DOM này không thể được gọi là một hàm.

đây là ví dụ về dữ liệu JSON được chuyển đến thành phần.

{ "author" : "Some user", 
    "body" : "<div>Great work</div>", 
    "replies" : [ { "author" : "A user replying", 
     "body" : "<div Yes it was great work</div>" 
     }, 
     { "author" : "Another user replying", 
     "body" : "<div It really was great work!</div>" 
     } 
    ] 
} 

Answer 1

Nếu tôi tạo nút con làm đối tượng ở đầu phương thức hiển thị, nó hoạt động tốt.

export default class extends React.Component { 
    let replies = null 
    if(this.props.replies){ 
    replies = this.props.replies.map((reply) => { 
     return (
     <Comment author={reply.author} body={reply.body} /> 
    ) 
    }) 
    } 

    render() { 
    return (
     <div className="comment"> 
     <div className="replies">{ replies }</div> 
     </div> 
    ) 
    } 
} 

Answer 2

Dưới đây là một sự thay thế trong ES6:

import React, { Component, PropTypes } from 'react' 

export default class Comments extends Component { 

    render() { 

    const { children } = this.props 

    return (
     <div className="comments"> 
     {children.map(comment => 
      <div key={comment.id} className="comment"> 
      <span>{comment.content}</span> 
      {comment.children && <Comments children={comment.children}/>} 
      </div> 
     )} 
     </div> 
    ) 

    } 

} 

Comments.propTypes = { 
    children: PropTypes.array.isRequired 
} 

Và là một số thành phần khác:

<Comments children={post.comments}/> 

Answer 3

Cách đơn giản nhất là tạo ra một hàm trong lớp mà trả về một thể hiện của bạn lớp học:

RecursiveComponent.rt.js:

var RecursiveComponent = React.createClass({ 
render: function() { 
    // JSX 
    .... 
}, 
renderRecursive: function(param1) 
    return React.createElement(RecursiveComponent, {param1: param1}); 

}); 

nếu bạn sử dụng react-templates library:

RecursiveComponent.rt:

<div> 
    ... 
    <div rt-repeat="recursiveChild in this.props.recursiveItem.recursiveChilds"> 
      {this.renderRecursive(recursiveChild)} 
    </div> 
</div>