今回は、親コンポーネントから子コンポーネントのメソッドを実行する方法についてです。
子コンポーネントから親コンポーネントのメソッドを実行するのは以前に実装した事があるので知っていましたが、逆もできるのですね。
なお、React と書いていますが、React Native でも問題なく動作しました。
参考にさせていただいた記事はこちら。
Reactで親から子コンポーネントのメソッドを実行する方法 | でざなり
https://dezanari.com/react-method-from-parent/
実装には ref を使用します。
まず、子コンポーネントに親コンポーネントから実行したいメソッドを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 | class ChildComponent extends Component { constructor(props) { super(props); this.childMethod() { // 実行したい処理を記述 } } render() { return <p>子コンポーネントです</p>; }}export default ChildComponent; |
親コンポーネントでは、.createRef() で子コンポーネントの参照を作成し、それを呼び出した子コンポーネントに渡します。
下記コードでは、4行目と 13 行目です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | class ParentComponent extends Component { constructor(props) { super(props); this.ChildRef = React.createRef(); this.onClickButton() { // 子コンポーネントのメソッドを実行 this.ChildRef.current.childMethod(); } } render() { return ( <div> <ChildComponent ref={this.ChildRef} /> <button onClick={this.onClickButton}>子コンポーネントのメソッドを実行する</Button> </div>; }}export default ParentComponent; |
あとは、ボタンをクリックした時に呼び出される関数内で、this.ChildRef.current.childMethod(); を実行することで、子コンポーネントのメソッドを実行することができます。
実際にプロジェクトに組み込んで実行したところ、問題なく子コンポーネントのメソッドが実行されていることを確認できました！
色々な記事を見比べましたが、個人的にはこの書き方が一番わかりやすくておすすめです。
以上、React で親コンポーネントから子コンポーネントのメソッドを実行する方法についてでした。
ご参考になれば幸いです。
