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

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

React では、通常、コンポーネント間の通信は props (プロパティ) とイベントを通じて実現されますが、を使用して、親コンポーネントから子コンポーネントのメソッドにアクセスして呼び出すことができます。 References.

Refs を使用したメソッド呼び出し

1. 子コンポーネントを forwardRef でラップする: 子コンポーネントのインスタンスにアクセスするには、子コンポーネントのインスタンスを forwardRef でラップします。 。これにより、React は 2 番目の引数として ref をコンポーネントに渡すことができます。
2. Initialize Child Instance Ref: 親コンポーネントで、useRef() を使用して ref を作成します。これにより、子コンポーネントのインスタンスへの参照が保存されます。
3. Assign Ref to Child: ref prop を使用して、子コンポーネントに参照を渡します。これにより、子コンポーネントのインスタンスが親コンポーネントの参照に割り当てられます。
4. 子メソッドの公開: 子コンポーネント内で、useImperativeHandle を使用して、親に公開するメソッドを含むオブジェクトを返します。

の例Hooks

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>
  );
};

ReactDOM.render(<Parent />, document.getElementById('root'));

この例では、getAlert() は ChildRef の現在のプロパティにアクセスすることで Parent コンポーネントから呼び出すことができる Child コンポーネントによって公開されるメソッドです。子メソッドを親から直接呼び出すことは推奨されず、適切なコンポーネント通信パターンを優先して避ける必要があることに注意してください。

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