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

這裏沒有具體的行動，把它歸結爲分離的問題和您的應用有何意義。孩子/愚蠢組件常常不知道如何處理被點擊的東西。這是一個更適合父母的工作。例如，如果您有一個項目列表（父項），那麼列表項目（子項目）通常只是想通知父項目他們已被點擊。父母是管理列表狀態的父母，因此父母可能希望將其他項目標記爲選定項目（多選），或者可能希望取消選擇先前的選擇並將新項目標記爲選定項目（單選）。讓兒童組件知道所有同齡人都能做到這一點是不合理的。