最近reactを始めて、コンポーネント間でのメソッドの共有だったりが
ようやくできるようになってきましたので、備忘録的に。
※本当の本当に初歩的な内容になります。
##子から親コンポーネントのメソッドを呼び出す。
便宜上一枚の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を取り込まなければなりません。
書き方はこのような感じです。
import {Parent} from 'ここにpathを書く';
これをページ上部に追加しましょう。
##疑問
###①逆に親のメソッド呼び出したい場合はどうしたらいいの？
すこしトリッキーな挙動になりますがこちらの記事を参照ください。
###②thisってなんなの？よくわからない！
更新予定です(2016/11/26)