Chamar método de componente filho pelo componente pai

Neste artigo você aprenderá a chamar método de componente filho pelo componente pai com React, uma técnica muito importante!

Fala programador(a), beleza? Bora aprender mais sobre React!

Primeiramente, é importante questionar: por que precisaríamos chamar um método de um componente filho a partir de um componente pai no React?

Essa prática não é comum e, muitas vezes, indica um design de componente que pode ser otimizado.

No entanto, existem situações em que isso pode ser necessário, especialmente quando lidamos com certos tipos de comportamento de interface de usuário que requerem uma manipulação mais direta dos componentes.

Por exemplo, você pode ter um componente filho que controle um modal e deseja abrir esse modal a partir do componente pai em algumas interações do usuário.

Nesses casos, chamar um método de um componente filho pode ser a solução mais direta e simples.

Usando referências com componentes funcionais no React

Diferentemente dos componentes de classe, os componentes funcionais não têm instâncias, então, tecnicamente, não há como chamar métodos diretamente em componentes funcionais.

Mas o React oferece uma solução para isso: a API de Referências (Refs).

Com ela, é possível criar uma referência para um elemento filho e usá-la para chamar um método.

Veja um exemplo:

import React, { useRef, useEffect } from "react";

const ChildComponent = React.forwardRef((props, ref) => {
  const myMethod = () => {
    console.log('Método do componente filho chamado!');
  }

  useEffect(() => {
    ref.current = { myMethod };
  }, []);

  return <div>Child Component</div>;
});

function ParentComponent() {
  const childRef = useRef(null);

  useEffect(() => {
    if (childRef.current) {
      childRef.current.myMethod();
    }
  }, []);

  return <ChildComponent ref={childRef} />;
}

Nesse código, a função myMethod é definida no componente filho.

No componente pai, criamos uma referência com useRef e passamos essa referência para o componente filho via ref.

Então, dentro de um useEffect, podemos chamar o método myMethod no componente filho usando a referência.

Usando o usoImperativeHandle e forwardRef em Funções

Se você estiver usando funções em vez de classes para seus componentes em React, você não poderá usar a referência como fizemos no exemplo anterior.

No entanto, o React fornece um gancho chamado useImperativeHandle que pode ser usado em combinação com forwardRef para permitir que um componente pai invoque funções dentro de um componente filho.

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod() {
      console.log('Child method called!');
    },
  }));

  return <div>Child Component</div>;
});

function ParentComponent() {
  const childRef = useRef();

  function callChildMethod() {
    childRef.current.childMethod();
  }

  return (
    <div>
      <button onClick={callChildMethod}>Call Child Method</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

este exemplo, a função childMethod dentro do ChildComponent é exposta para o ParentComponent usando o gancho useImperativeHandle e o forwardRef.

Então, no ParentComponent, podemos chamar childMethod na referência do ChildComponent.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

A capacidade de chamar métodos de um componente filho a partir de um componente pai é uma ferramenta poderosa no arsenal de um desenvolvedor React.

No entanto, como muitas ferramentas poderosas, ela deve ser usada com cautela.

Frequentemente, existem maneiras mais ‘React-ish’ de resolver o mesmo problema, usando o fluxo de dados descendente através de props ou através do gerenciamento de estado.

No entanto, em alguns casos, esta técnica pode ser a mais direta e simples, e é bom saber que ela está disponível quando você precisa.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.