React で親コンポーネントから子メソッドを呼び出すにはどうすればよいですか?

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

React では、子メソッドを直接呼び出す必要は必ずしもありません。ただし、子コンポーネントが命令型メソッドを公開する場合など、必要になる場合もあります。この記事では、クラスベースのコンポーネントと関数型コンポーネントの両方で、refs を使用してこれを実現する方法を説明します。

クラスベースのコンポーネント

refs を使用して親クラスベースのコンポーネントから子メソッドを呼び出すには、次のようにします。次の手順に従ってください:

1. 次を使用して親コンポーネントに ref を作成します。 createRef():

const childRef = React.createRef();

2. 子コンポーネントに参照を割り当てます:

<Child ref={childRef} />

3. childRef を使用して子のメソッドにアクセスします:

childRef.current.getAlert();

機能コンポーネントフック

React Hooks の導入により、関数コンポーネントでも refs を使用できるようになりました。 refs を使用して親機能コンポーネントから子メソッドを呼び出す方法は次のとおりです:

1. useRef() フックを使用して ref を作成します:

const childRef = useRef();

2. 子コンポーネントを forwardRef でラップして、 ref:

const Child = forwardRef((props, ref) => {
  // ...
});

3. useImperativeHandle フックを使用して、子のメソッドを親に公開します:

useImperativeHandle(ref, () => ({ getAlert() { alert('clicked'); } }));

4. childRef を使用してアクセスします子供のメソッド:

childRef.current.getAlert();

注: React では、refs を使用して子メソッドを呼び出すことは一般に推奨されていないことに注意することが重要です。データを下に渡し、イベントを props と state を通じて上に渡すことをお勧めします。

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