ホームページ > ウェブフロントエンド > jsチュートリアル > React で親から子コンポーネントのメソッドを呼び出す方法は?

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

Susan Sarandon
リリース: 2024-12-21 09:05:10
オリジナル
793 人が閲覧しました

How to Call a Child Component Method from its Parent in React?

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

React アプリケーションでは、多くの場合、子コンポーネントで定義されたメソッドをその親コン​​ポーネントから呼び出す必要があります。親コンポーネント。これを実現するにはさまざまなアプローチがありますが、この記事では、ref を活用する一般的な方法に焦点を当てます。

Ref による命令型メソッドの公開

Ref を使用すると、開発者はレンダリングされたメソッドにアクセスできます。コンポーネントの要素と対話します。以前は、ref はクラスベースのコンポーネントでのみサポートされていましたが、React Hooks の導入により、関数コンポーネントでも同様に使用できるようになりました。

関数コンポーネントでの forwardRef の使用

refs を通じて関数コンポーネントにアクセスできるようにするには、forwardRef でラップする必要があります。これにより、ref プロパティを通じて割り当てられ、関数コンポーネントの 2 番目の引数として渡される ref オブジェクトにアクセスできるようになります。

UseImperativeHandle を使用したメソッドの公開

子コンポーネントのメソッドを公開するには、useImperativeHandle フックを使用します。このフックは、ref オブジェクトとコールバック関数の 2 つの引数を取ります。コールバック関数は、コンポーネント インスタンスを拡張するオブジェクトを返します。この返されたオブジェクト内でメソッドを提供することで、参照を通じてアクセスできるようになります。

コード スニペットを使用した例

親から子メソッドを呼び出す方法を示します。 refs と useImperativeHandle フックを使用するコンポーネント:

Childコンポーネント

const Child = forwardRef((props, ref) => {

  useImperativeHandle(ref, () => ({

    getAlert() {
      alert("getAlert from Child");
    }

  }));

  return <h1>Hi</h1>;
});
ログイン後にコピー

親コンポーネント

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};
ログイン後にコピー

この例では、子コンポーネントは ref を通じて getAlert メソッドを公開しており、このメソッドは から呼び出すことができます。の現在のプロパティにアクセスして、親コンポーネントを取得します。 ref.

注: 子コンポーネントで命令型メソッドを公開することは、よりデータ駆動型で宣言的なアプローチを優先するため、一般に推奨されないことを覚えておくことが重要です。ただし、このメソッドは、子コンポーネントの機能に直接アクセスする必要がある特定のシナリオでは役立ちます。

以上がReact で親から子コンポーネントのメソッドを呼び出す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート