Wie einfach Daten von Kind zu Root in reactjs übergeben?

Question

ich ein Kommentarfeld wie dieses:

ich alle Aktionen CommentBox Komponente gebunden haben, gibt es eine decComment Aktion Delete Ereignis in jedem Kommentar zu handhaben.

Jedesmal, wenn ich Sie auf die Schaltfläche delete in Comment Ich brauche die commentId von Comment zu CommentList zu CommentBox und dann CommentBox Updates Kommentardaten, entfernt passieren, dass Kommentar von Kommentaren Daten und Wieder macht die Kommentarliste. Hier

ist ein Code:

var Comment = React.createClass({ 
    handleDel: function() { 
     var cid = this.props.cid; 
     this.props.onDel(cid); 
     return false; 
    }, 

    render: function() { 
     return (
      <div key={this.props.cid}> 
       <a onClick={this.handleDel}>Del</a> 
      </div> 
     ); 
    } 
}); 


var CommentList = React.createClass({ 
    handleDel: function(cid) { 
     this.props.onDel(cid); 
    }, 

    render: function() { 
     var commentNodes = this.props.data.map(function(c) { 
      return <Comment cid={c.id} onDel={this.handleDel} /> 
     }.bind(this)); 
     return (
      <div className="comments"> 
       {commentNodes} 
      </div> 
     ) 
    } 
}); 


var CommentBox = React.createClass({ 

    ... ... 

    delComment: function (cid){ 
     function del(data) { 
      $.ajax({ 
       url: url, 
       type: 'delete', 
       dataType: 'json', 
       data: data, 
       success: function (e) { 
        if (e.retcode === 0) { 
         that.setState({ 
          data: e.data 
         }); 
        } else { 
         alert(e.error); 
        } 
       } 
      }); 
     } 

     if (window.confirm('You Sure ？')) { 
      del(); 
     } 
    }, 

    ... ... 

}) 

Dieser Prozess zu ausführlich! Gibt es einen einfachen Weg, dies zu tun?

Answer 1

Sie können auch eine partielle Anwendung des Handler, wie dies tun:

<Comment onDel={this.handleDel.bind(null, c.id)} /> 

Wenn this.handleDel aufgerufen wird, wird c.id als erstes Argument übergeben werden. Sie können auch durch CommentList.handleDel Entfernung verkürzen und nur

<Comment onDel={this.props.onDel.bind(null, c.id)} /> 

Für eine wenig mehr Informationen zu diesem Thema zu tun, Communicate Between Components in dem React docs sehen.

Answer 2

Sie können auch versuchen, einen globalen Anwendungsstatus zu verwalten, der für alle Komponenten verfügbar ist, die von Requisiten übergeben werden.

Bei jeder Änderung des Anwendungsstatus können Sie das Ganze erneut rendern. Wenn Sie von der Top-Level-Komponente neu rendern, können Sie versuchen, sie mit shouldComponentUpdate zu optimieren. Ich habe das nicht getestet und weiß nicht, ob es für eine große Anwendung jedoch beherrschbar ist.

Werfen Sie auch einen Blick darauf, wie Om mit unveränderlichen Datenstrukturen optimiert.