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 'react'; import { render } from 'react-dom'; 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 'react'; import { render } from 'react-dom'; 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 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element => { this.callRefInput = element; }; this.focusRefInput = () => { //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 ); }