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

Calling a Child Component Method from Its Parent in React

In React applications, it's often necessary to invoke methods defined in child components from their parent components. While there are various approaches to achieve this, this article focuses on a popular method that leverages refs.

Imperative Method Exposure via Refs

Refs allow developers to access the rendered elements of a component and interact with them. Previously, refs were only supported by class-based components, but with the introduction of React Hooks, they can now be used in functional components as well.

Using forwardRef with a Function Component

To make a function component accessible through refs, it needs to be wrapped in forwardRef. This gives us access to a ref object that can be assigned through the ref prop and passed as the second argument to the function component.

Exposing the Method Using UseImperativeHandle

To expose a method on a child component, we use the useImperativeHandle hook. This hook takes two arguments: a ref object and a callback function. The callback function returns an object that will extend the component instance. By providing the method within this returned object, we make it accessible through the ref.

Example with Code Snippets

Let's demonstrate how to call a child method from a parent component using refs and the useImperativeHandle hook:

Child Component

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

  useImperativeHandle(ref, () => ({

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

  }));

  return <h1>Hi</h1>;
});

Parent Component

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

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

In this example, the Child component exposes the getAlert method through the ref, which can be called from the Parent component by accessing the current property of the ref.

Note: It's important to remember that exposing imperative methods on child components is generally discouraged in favor of a more data-driven and declarative approach. However, this method can be useful in certain scenarios where you need direct access to a child component's functionality.

The above is the detailed content of How to Call a Child Component Method from its Parent in React?. For more information, please follow other related articles on the PHP Chinese website!