sposób renderowania komponentów potomnych w pliku react.js rekursywnie

Question

Chciałem rekurencyjnie dodać komponent reagowania z własnego komponentu. Widziałem ten przykład z tree component, który odwzorowywał potomne TreeNodes i dodawał węzły potomne w ten sam sposób. Niestety nie działa dla mnie. Pomysł polegał na stworzeniu prostego komponentu komentarza, a odpowiedzi wykorzystywałyby ten sam komponent.

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

pojawia się następujący komunikat o błędzie:

Uncaught TypeError: failed skonstruować „komentarz”: Proszę używać „nowego” operatora, to konstruktor obiektu DOM nie można nazwać jako funkcja.

tutaj jest przykładem danych JSON przekazanych do komponentu.

{ "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

Jeśli utworzę węzły podrzędne jako obiekt u góry metody renderowania, działa poprawnie.

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

Oto alternatywa w 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 
} 

A jest jakiś inny składnik:

<Comments children={post.comments}/> 

Answer 3

Najprostszym sposobem jest stworzenie funkcji w klasie, która zwraca instancję swoje klasa:

RecursiveComponent.rt.js:

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

}); 

jeśli używasz react-templates library:

RecursiveComponent.rt:

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