Reactで子コンポーネントから親コンポーネントのメソッドを呼び出す。 #JavaScript

最近reactを始めて、コンポーネント間でのメソッドの共有だったりが
ようやくできるようになってきましたので、備忘録的に。
※本当の本当に初歩的な内容になります。

子から親コンポーネントのメソッドを呼び出す。

便宜上一枚のjsファイルですが、実際は分かれてます。

index.js

class Parent extends Component {

 shoutParent(){
   console.log('親だよ！！！');
 }

 render() {
  return (
    <Child parentMethod={this.shoutParent} />
  );
 }
}

class Child extends Component {

 render() {
  return (
    <button onClick={this.props.parentMethod}>
      押しまっせ
    </button>
  );
 }
}

constructorなどは省略して最低限にしてます。

①子コンポーネントにpropsとしてmethodを渡す。

Reactでは、
<コンポーネント名 />
といった形で、コンポーネントをレンダリングします。
レンダリングとは、ざっくりといえばviewに表示することです。

一つのコンポーネントはそれぞれstate（状態）を持っており、
setState() 関数によって更新されると、その度に再レンダリングされます。
（この辺は別の記事で書きたいと思います。）

このようにレンダリングすると、二つのコンポーネントに親子関係ができます。
この例だと、
”Parent”というコンポーネントの中で、
"Child"というコンポーネントをレンダリングしているので、

Parentコンポーネントが親
Childコンポーネントが子

ということになります。

そして親コンポーネントは子コンポーネントにpropsとして関数や値を渡すことができます。
ちなみにpropsは一度レンダリングされると変更できません。
参考:facecook公式document

今回は、propsの中にparentMethodというキーをセットし、
値を this.shoutParent としました。

thisとは

このthisはコンテキストと呼ばれ、reactとは関係ないのですが、
理解すると非常に便利でjavascript中級者になれます。
（初心者の内容だとメンターに言われました。笑）
なので別の記事で詳しく書きたいと思います。
更新予定です(2016/11/26)

ここで簡単に説明すると、thisとはParentコンポーネントのことです。

つまりこれでchildコンポーネントのpropsの中に
props = { parentMethod: Parent.shoutParent }
という値がセットされました。

②子コンポーネントからpropsに入っているmethodを呼び出す

あとは簡単で、なんらかのイベントで
this.props.parentMethod
を呼び出すだけです。

今回はonClickで呼び出しました。

注意点としてはこのthisはChildコンポーネントのことですので注意してください。
その名前の通りコンテキスト（文脈）によってとる値が変わるのがthisです。

③注意点

本来はChildコンポーネントとParentコンポーネントは別ファイルですので、
Childコンポーネントの方でimportを使ってParentを取り込まなければなりません。
書き方はこのような感じです。

child.js

import {Parent} from 'ここにpathを書く';

これをページ上部に追加しましょう。

疑問

①逆に親のメソッド呼び出したい場合はどうしたらいいの？

すこしトリッキーな挙動になりますがこちらの記事を参照ください。

②thisってなんなの？よくわからない！

更新予定です(2016/11/26)