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 サイトの他の関連記事を参照してください。