Reactで親から子コンポーネントのメソッドを実行する方法

Reactで親から子コンポーネントのメソッドを実行する方法 JavaScript

今回はReactで子コンポーネントに書いたメソッドを親コンポーネントで実行する方法を解説します。

サンプルとして、子コンポーネントでアラートを表示するメソッドを作り、それを親コンポーネントで実行してみます。

 

デモはこんな感じ↓

デモ

 

スポンサーリンク

子コンポーネントのメソッドを親コンポーネントで実行する方法

デモのコードを解説していきます。

まずは子コンポーネント(<Child />)

export default class Child extends Component {

  // ①親で実行するメソッドを子コンポーネントで用意
  getAlert() {
    alert('getAlert worked!');
  }

  render() {
    return <h1>click button!</h1>;
  }
}

子コンポーネントではメインの処理を書くだけです。メソッドはバインドする必要もありません。

 

続いて親コンポーネント(<Parent />)

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.ChildRef = React.createRef(); // ←②React.createRef()で参照を作成
    this.doClick = this.doClick.bind(this);
  }

  // ③子コンポーネントのメソッドを実行するメソッドを親で作成
  doClick() {
    this.ChildRef.current.getAlert(); // this.ref名.currentで実体にアクセス
  }

  render() {
    return (
      <div>
        <Child ref={this.ChildRef} /> {/** ←④子コンポーネントを呼び出し、refで参照する */}
        <button onClick={this.doClick}>click me</button> {/** ←⑤親で関数を実行 */}
      </div>
    );
  }
}

まずはコンストラクター内でthis.ref名 = React.createRef();で参照を作ります。

次に子コンポーネントのメソッドを実行するメソッドを親コンポーネントに書きます。子コンポーネントの実体にアクセスするにはthis.ref名.currentと書くので、this.ref名.current.子メソッドで子コンポーネントのメソッドを呼び出せます。こちらはバインドを忘れずに。

そうしたら子コンポーネントを呼び出し、ref={this.ref名}というプロパティを渡します。これで作成した参照がこの子コンポーネントと紐付きます。

最後に親コンポーネントのメソッドを実行すれば、子コンポーネントのメソッドを呼び出せます。

 

まとめ

アプリの規模が大きくなってくると親コンポーネントから子コンポーネントのメソッドを実行したいというときがあると思います。

refを使えばできるので、ぜひ試してみてください。

ただしやりすぎるとコードを追うのがつらくなるのでほどほどに…。