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

MainComponentから見て、孫に当たるContentComonentChildのボタンを押してContentComonentを経由してさらにMainComponentのalertEventを叩くまでの書き方

keyとvalueが重複（子供の関数名と親の関数名）が同じ場合だと、あれkeyってどっちの関数だっけ？ってなるときがある。。

ES2015で記述（Babelなどでトランスパイルが必要）
keyはかならずそのコンポーネントで使用している関数名である

React.js

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"));