React で親コンポーネントから子関数を呼び出す
この記事では、React で子コンポーネントのメソッドを親コンポーネントに呼び出す方法を学習します。
ほとんどの場合、開発者は子コンポーネントから親コンポーネントのメソッドを呼び出す必要があり、親コンポーネントのメソッドを props として子コンポーネントに渡すことで実現できます。
逆にすることもできます。 ここでは、refs を使用して、親から子コンポーネントのメソッドを呼び出します。
React での ref の紹介
一般に、小道具を子コンポーネントに渡すことで、親コンポーネントから子コンポーネントと対話できます。 ref を使用すると、典型的な親と子のデータ フローの外でコンポーネントと対話できます。
ユーザーは、次の構文に従って ref を作成できます。
this.newRef = React.createRef();
ref を作成した後、ユーザーはそれを任意の HTML 要素またはコンポーネントの ref 属性の値として割り当てることができます。 これを Child コンポーネントの ref 属性に割り当てます。
<Child ref={this.newRef} />
これで、ユーザーは newRef の current 属性を介して子コンポーネントのマウントされたインスタンスにアクセスし、子コンポーネントのメソッドを呼び出すことができます。
this.childRef.current.childMethod();
したがって、このように、ref は典型的なデータ フロー外のコンポーネントと対話するのに役立ちます。
ref を使用して、クラス コンポーネントで親から子関数を呼び出す
以下の例では、App (親) と Child という 2つのコンポーネントを作成しています。 Child コンポーネントでは、レンダリングする HTML と childMethod() を追加しました。これにより、呼び出し時にアラート ボックスが表示されます。
App コンポーネントでは、コンストラクターで ref を作成し、その値を Child コンポーネントの ref 属性に割り当てました。
ユーザーが クリック ボタンをクリックすると、callChild() メソッドが呼び出されます。 callChild() メソッドは、ref の current 属性を介して childMethod() にアクセスし、呼び出します。
コード例:
// import required libraries
import React from "react";
import Child from "./Child";
export default class APP extends React.Component {
constructor(props) {
super(props);
// Initializing the Refs
this.childRef = React.createRef();
}
// call the child method
callChild = () => {
this.childRef.current.childMethod();
};
render() {
return (
<div>
{/* Passing Ref to CHild component */}
<Child ref={this.childRef} />
<button onClick={this.callChild}>Click</button>
</div>
);
}
}
import React from "react";
export default class Child extends React.Component {
childMethod() {
alert('Called the Method of Child.');
}
render() {
return <h1>This is From Child Component.</h1>;
}
}
出力：
フックを使用して機能コンポーネントで親から子関数を呼び出す
以下の例では、App と Child という 2つの関数コンポーネントを作成しています。 useRef フックを使用して親コンポーネント内の Child コンポーネントにアクセスするために forwardRef フック内に Child コンポーネントをラップしました。
また、useImperativeHandle を使用し、ref を最初のパラメーターとして、コールバック関数を 2 番目のパラメーターとして渡しました。 ここで、Child コンポーネントは、コールバック関数が返すものを拡張します。
useRef フックの current 属性を介して、親コンポーネントのコールバック関数から返された値にアクセスできます。
コード例 - (App.js):
// import required libraries
import React, { useRef } from "react";
import Child from "./Child";
export default function APP() {
// use hooks to create `ref`
const childRef = useRef();
// call child method
const onClick = () => {
childRef.current.childMethod();
};
return (
<div>
{/* Passing Ref to CHild component */}
{/* use `refs` */}
<Child ref={childRef} />
<button onClick={onClick}>Click</button>
</div>
);
}
コード例 - (Child.js):
import React, { forwardRef, useImperativeHandle } from "react";
// While using the hooks, it is required to wrap the component inside the forwardRef to gain access to the ref object,
//, which we create using the `useref` hooks inside the parent component.
const Child = forwardRef((props, ref) => {
// Extending the child component with the return value of the callback function passed as a second parameter of the useImperatuveHandle.
useImperativeHandle(ref, () => ({
childMethod() {
alert("Called the Method of Child.");
},
}));
return <h1>Use Refs in functional component.</h1>;
});
export default Child;
出力：
ref を使用して、親関数から子関数を呼び出すことを学びました。 また、ユーザーは ref を使用して親コンポーネントを介して子コンポーネントを変更できます。
