3

A documentação diz que o encaminhamento de referência é uma técnica para passar a ref de um componente pai para um filho, e dá exemplos com React.forwardRef.

Mas qual a diferença entre encaminhar referências usando React.forwardRef ou simplesmente usando uma prop diferente, como o Material UI faz no componente <TextField /> com a prop inputRef?

Existem pontos positivos que uma abordagem traz e a outra não?

1

2 Respostas 2

5

A diferença é que, quando você utiliza o nome ref, está aderindo a uma convenção já estabelecida na comunidade. Portanto, se um componente que você desenvolve irá exigir, de quem o consome, uma referência, utilizar React.forwardRef é mais adequado já que poderá utilizar o nome ref.

Uma outra diferença é que, ao contrário de inputRef (que é, de fato, uma prop), ref não é passada a componentes como propriedade. Isso é mencionado na documentação.

Não vou explicar como o React.forwardRef funciona porque a documentação já é extremamente clara no assunto.


Eventualmente, mais de uma referência precisa ser passada ao componente. Nesses casos, você é obrigado a passar as próximas via props. É o caso da inputRef, mencionada na pergunta.

Da documentação linkada por você:

inputRef, of type ref, pass a ref to the input element.

E no final ainda diz:

The ref is forwarded to the root element.

De fato, se verificarmos o código-fonte do componente em questão, pode-se confirmar que ele utiliza o React.forwardRef para encaminhar a referência qualificada como ref. A propriedade inputRef, pois, torna-se necessária já que mais de uma referência pode ser utilizada nesse componente, tal que:

  • ref é encaminhada ao componente (interno) TextFieldRoot;
  • inputRef é encaminhada ao componente (também interno) InputComponent.
1
  • 1
    É, cometi uma gafe falando "outra prop" hehe. Commented 11/06/2021 às 17:41
-5

No React só existe uma forma de passar ref para outro componente, que é com o React.forwardRef.

O que o material-ui faz, é basicamente usar o React.forwardRef no componente.

inserir a descrição da imagem aqui

Link do código no github oficial

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .