React.jsで子Componentから親Componentへの通知に関してのメモ(極端な例)

MainComponentから見て、孫に当たるContentComonentChildのボタンを押してContentComonentを経由してさらにMainComponentのalertEventを叩くまでの書き方
keyとvalueが重複(子供の関数名と親の関数名)が同じ場合だと、あれkeyってどっちの関数だっけ?ってなるときがある。。

  • ES2015で記述(Babelなどでトランスパイルが必要)
  • keyはかならずそのコンポーネントで使用している関数名である
  
class MainComponent extends React.Component {
  alertEvent (){
    alert('親へ通知アラート');
  }
  render() {
    return (
      <div>
        <ContentComonent onClickEvent={this.alertEvent.bind(this)} />
      </div>
    );
  }
}
class ContentComonent extends React.Component {
  render() {
    return (
      <div>
        <p>コンテンツ内容</p>
        <ContentComonentChild onClick={this.props.onClickEvent} />
      </div>
    );
  }
}
class ContentComonentChild extends React.Component {
  render() {
    return (
      <button type="button" onClick={this.props.onClick}>親のアラートを呼び出す</button>
    );
  }
}
ReactDOM.render(
  <MainComponent />,
  document.getElementById('app')
);
  

Author

札幌でフロントエンドエンジニアとして働いています。好きな音楽はSIAM SHADE!
SIAM SHADEの六人目のメンバーとして日々ロックを愛し続けている。
HTML,CSS,JavaScriptをベースにCMS構築が得意です。
HAMWORKS社員 https://ham.works