Refs é a abreviação usada para referências em Reagir. É similar à chaves em Reagir. É um atributo que permite armazenar uma referência a determinados nós DOM ou elementos React. Ele fornece uma maneira de acessar nós React DOM ou elementos React e como interagir com eles. É utilizado quando queremos alterar o valor de um componente filho, sem fazer uso de props.

Quando usar referências

Refs pode ser usado nos seguintes casos:

• Quando precisamos de medições DOM, como gerenciamento de foco, seleção de texto ou reprodução de mídia.
• É usado para acionar animações imperativas.
• Ao integrar com bibliotecas DOM de terceiros.
• Também pode ser usado como retornos de chamada.

Quando não usar Refs

• Seu uso deve ser evitado para qualquer coisa que possa ser feita declarativamente . Por exemplo, em vez de usar abrir() e fechar() métodos em um componente Dialog, você precisa passar um está aberto apoie-o.
• Você deve evitar o uso excessivo das Refs.

Como criar referências

No React, Refs podem ser criados usando React.createRef() . Ele pode ser atribuído a elementos React por meio do referência atributo. Geralmente é atribuído a uma propriedade de instância quando um componente é criado e, em seguida, pode ser referenciado em todo o componente.

 class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } } 

Como acessar as Refs

No React, quando uma ref é passada para um elemento dentro do método render, uma referência ao nó pode ser acessada através do atributo atual da ref.

 const node = this.callRef.current; 

Refs propriedades atuais

O valor ref difere dependendo do tipo do nó:

• Quando o atributo ref é usado no elemento HTML, o ref criado com React.createRef() recebe o elemento DOM subjacente como seu atual propriedade.
• Se o atributo ref for usado em um componente de classe personalizado, o objeto ref receberá o montado instância do componente como sua propriedade atual.
• O atributo ref não pode ser usado em componentes de função porque eles não têm instâncias.

Adicionar Ref aos elementos DOM

No exemplo abaixo, estamos adicionando um ref para armazenar a referência a um nó ou elemento DOM.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); } addingRefInput() { this.callRef.current.focus(); } render() { return ( <h2>Adding Ref to DOM element</h2> ); } } export default App; 

Saída

Adicionar componentes Ref aos componentes da classe

No exemplo abaixo, estamos adicionando um ref para armazenar a referência a um componente de classe.

Exemplo

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); } return ( <h2>Adding Ref to Class Component</h2> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App; 

Saída

Referências de retorno de chamada

No react, existe outra maneira de usar refs chamada ' referências de retorno de chamada ' e dá mais controle quando os árbitros são definir e desarmar . Em vez de criar refs pelo método createRef(), React permite uma maneira de criar refs passando uma função de retorno de chamada para o atributo ref de um componente. Parece o código abaixo.

 this.callRefInput = element} /> 

A função de retorno de chamada é usada para armazenar uma referência ao nó DOM em uma propriedade de instância e pode ser acessada em outro lugar. Ele pode ser acessado conforme abaixo:

 this.callRefInput.value 

O exemplo abaixo ajuda a entender o funcionamento das referências de retorno de chamada.

 import React, { Component } from &apos;react&apos;; import { render } from &apos;react-dom&apos;; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element =&gt; { this.callRefInput = element; }; this.focusRefInput = () =&gt; { //Focus the input using the raw DOM API if (this.callRefInput) this.callRefInput.focus(); }; } componentDidMount() { //autofocus of the input on mount this.focusRefInput(); } render() { return ( <h2>Callback Refs Example</h2> ); } } export default App; 

No exemplo acima, o React chamará o retorno de chamada 'ref' para armazenar a referência ao elemento DOM de entrada quando o componente montagens , e quando o componente desmonta , chame-o com nulo . As referências são sempre atualizado antes de o componenteDidMount ou componenteDidUpdate incêndios. A passagem de referências de retorno de chamada entre componentes é a mesma que você pode trabalhar com referências de objeto, que é criado com React.createRef().

Saída

Encaminhando Ref de um componente para outro componente

O encaminhamento de referência é uma técnica usada para passar um referência através de um componente para um de seus componentes filhos. Pode ser realizado utilizando o React.forwardRef() método. Esta técnica é particularmente útil com componentes de ordem superior e especialmente usado em bibliotecas de componentes reutilizáveis. O exemplo mais comum é dado abaixo.

Exemplo

 import React, { Component } from 'react'; import { render } from 'react-dom'; const TextInput = React.forwardRef((props, ref) => ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e => { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}> Submit ); } } export default App; 

No exemplo acima, existe um componente Entrada de texto que tem um filho como campo de entrada. Agora, para passar ou encaminhar o referência até a entrada, primeiro, crie uma referência e depois passe sua referência para . Depois disso, o React encaminha a referência para o encaminhamentoRef funcionar como um segundo argumento. A seguir, encaminhamos esse argumento ref para . Agora, o valor do nó DOM pode ser acessado em entradaRef.atual .

Reaja com useRef()

É introduzido em Reagir 16.7 e versão acima. Ajuda a obter acesso ao nó ou elemento DOM e, então, podemos interagir com esse nó ou elemento DOM, como focar o elemento de entrada ou acessar o valor do elemento de entrada. Ele retorna o objeto ref cujo .atual propriedade inicializada com o argumento passado. O objeto retornado persiste durante a vida útil do componente.

Sintaxe

 const refContainer = useRef(initialValue); 

Exemplo

No código abaixo, useRef é uma função que é atribuída a uma variável, entradaRef e, em seguida, anexado a um atributo chamado ref dentro do elemento HTML ao qual você deseja fazer referência.

 function useRefExample() { const inputRef= useRef(null); const onButtonClick = () => { inputRef.current.focus(); }; return ( Submit ); }