wie untergeordnete Komponenten in react.js rekursiv gerendert werden

Question

Ich wollte eine reactive-Komponente rekursiv innerhalb seiner eigenen Komponente hinzufügen. Ich habe dieses Beispiel einer tree component gesehen, die durch die untergeordneten TreeNodes mappte und untergeordnete Knoten in der gleichen Weise hinzufügte. Leider funktioniert es überhaupt nicht für mich. Die Idee war, eine einfache Kommentarkomponente zu haben, und die Antworten würden dieselbe Komponente wiederverwenden.

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

ich folgende Fehlermeldung:

Uncaught Typeerror: Fehler ‚Kommentar‘ konstruieren: Bitte benutzen Sie den ‚neuen‘ Betreiber, das DOM-Objekt Konstruktor kann nicht als Funktion aufgerufen werden.

Hier ist ein Beispiel für die JSON-Daten, die an die Komponente übergeben werden.

Answer 1

Wenn ich die untergeordneten Knoten als ein Objekt an der Spitze der Rendermethode erstellen, funktioniert es gut.

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

Hier ist eine Alternative in 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 
} 

Und ist eine andere Komponente:

<Comments children={post.comments}/> 

Answer 3

Der einfachste Weg ist es, eine Funktion in der Klasse zu erstellen, die Ihr eine Instanz zurückgibt Klasse:

RekursiveComponent.rt.js:

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

}); 

, wenn Sie verwenden react-templates library:

RecursiveComponent.rt:

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