React HandleClick在父组件

Question

阅读React教程和文档，无法找到任何关于在子组件<a onClick="{function(){ this.props.handleClick...中执行但在父组件中声明的操作的信息。

什么时候该做？为什么不在儿童组件中做所有的事情？我们有Redux，Flux但人们每天都这样做，为什么？

（例如与父组件）

var SongList = React.createClass({ 
    logTrack: function(track) { 
    console.log(track) 
    } 

    render: function() { 
    var trackNodes = this.props.data.map(function(track, i) { 
     return (
     <Song 
      key={i} 
      handleClick={(val) => this.logTrack(val)} // pass function through props 
     > 
      {track} 
     </Song> 
    ); 
    }); 

    return (
     <div className="row"> 
     {trackNodes} 
     </div> 
    ); 
    } 
}) 

var Song = React.createClass({ 
    render: function() { 
    <a onClick={ function() { this.props.handleClick('some value') }> 
     {this.props.children} 
    </a> 
    } 
}) 

Answer 1

这里没有具体的行动，把它归结为分离的问题和您的应用有何意义。孩子/愚蠢组件常常不知道如何处理被点击的东西。这是一个更适合父母的工作。例如，如果您有一个项目列表（父项），那么列表项目（子项目）通常只是想通知父项目他们已被点击。父母是管理列表状态的父母，因此父母可能希望将其他项目标记为选定项目（多选），或者可能希望取消选择先前的选择并将新项目标记为选定项目（单选）。让儿童组件知道所有同龄人都能做到这一点是不合理的。