forwardRef (React) - Expondo um nó DOM ao componente pai · HenriikOliveira

Hoje me deparei com uma necessidade: pegar uma referência DOM de um componente filho. No entanto, por padrão, os nós DOM de cada componente são privados. Então, percebi que teria que resolver esse 'problema'. Pesquisei um pouco e encontrei a função forwardRef. Em resumo, essa função permite que os nós dos componentes se tornem visíveis para seus componentes pais.

Na documentação do React mostra essa sintaxe:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

Mas não achei intuitivo, preferi fazer assim: + (Bônus para TS)

//Child.ts

import { forwardRef } from "react";

//...

type RefTyping = React.Ref<HTMLButtonElement>;

function Child({ props }: tipagem, ref: RefTyping) {
  // ...
};

export default forwardRef(Child)

Já no componente pai, temos apenas que passar a ref:

//Parent.ts

import { useRef } from "react"

export default function Parent() {
    //...
    const refForChild = useRef()
    
    return (
        <>
            <Child ref={refForChild} />
        </>
    )
}

Agora, ainda no componente pai, podemos acessar todos os dados do elemento DOM do componente filho: (Isso é maravilhoso)

//Parent.ts

import React, { useEffect } from "react"

//...

useEffect(() => {
    console.log(refForChild.current)
}, [])

Bônus -

"simple function":

"forwarded function":

GitHub -hernique33comiitei
Linkedin - Henrique Oliveira

Abraços pessoal!! <3