如何輕鬆地從孩子傳遞數據reactjs根？

enter image description here

我已綁定的所有行動，CommentBox組件，還有一個decComment行動來處理每個評論Delete事件。

每次當我點擊Comment的delete按鈕，我需要的Comment的commentId傳遞給CommentList到CommentBox然後CommentBox更新註釋數據，刪除從註釋數據和註釋重新呈現評論列表。

下面是一些代碼：

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

    ... ... 

})

這個過程太冗長！有沒有簡單的方法來做到這一點？

來源

2014-02-25 Robin

爲什麼是這樣「太冗長」？在每一個組件，您可以重命名處理程序，以什麼是適合的組件：在評論你正在處理一個「點擊」，但組件外點擊的概念是無關緊要的。在CommentList中，您正在尋找「onDel」的「刪除」。堅持這一點，看看你在一個月內回到代碼時的想法。我發現這種方法比在'document.body'上有大量偵聽器更具描述性。 –

你也可以做一個處理程序中，部分應用程序，像這樣：

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

當this.handleDel被調用時，c.id將作爲第一個參數傳遞。您也可以通過刪除CommentList.handleDel，只是做

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

對於一個小更多信息有關此主題的縮短，看到陣營文檔Communicate Between Components。

來源

2014-02-25 06:23:38

我們不能在頂級CommentBox組件上使用React附加一個點擊處理程序，並且可以聽取Comment組件中的任何點擊，而不必將CommentHandler一直從CommentBox傳遞到CommentList，然後傳遞給Comment。 – nimgrg

您也可以嘗試管理，這將是提供給所有的組件，通過道具通過一個全球性的應用程序狀態。

在每次更改應用程序的狀態，您可以重新渲染了整個事情。當你從頂級組件重新呈現，你可以嘗試用shouldComponentUpdate優化。但是我沒有測試過，不知道它是否適用於大型應用程序。

此外，請看Om如何通過使用不可變數據結構優化shouldComponentUpdate。

來源

2014-02-26 09:58:17

如何輕鬆地從孩子傳遞數據reactjs根？

回答

相關問題