読者です 読者をやめる 読者になる 読者になる

ゆとり世代休学生、インドに散る

ゆとり世代私立文系ノースキルマンが、休学、海外インターンによって意識が急上昇し、蒸発するブログ。

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

お気軽に、宜しくお願い致します。やる気、でます。

読者になる

f:id:OnomimonO:20161129000254j:plain こんにちは、どりんく(@_OnomimonO) です。

最近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"というコンポーネントレンダリングしているので、

ということになります。

そして親コンポーネントは子コンポーネントに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)