如何轻松地从孩子传递数据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根？

回答

相关问题