const node = this.myRef.current; O valor da ref difere dependendo do tipo do nó:

Quando o atributo ref é usado em um elemento HTML, a ref criada no construtor React.createRef() recebe um elemento DOM subjacente como a propriedade current. Quando o atributo ref é usado em um componente de classe, o objeto ref recebe uma instância montada de um componente em sua propriedade current. Você não pode usar o atributo ref em um componente funcional, já que eles não possuem instâncias. Os exemplos abaixo demonstram as diferenças.

Adicionando uma Ref a um Elemento DOM Este código usa uma ref para armazenar uma referência a um nó DOM:

class CustomTextInput extends React.Component { constructor(props) { super(props); // Cria uma ref para armazenar o elemento textInput do DOM this.textInput = React.createRef(); this.focusTextInput = this.focusTextInput.bind(this); }

focusTextInput() { // Explicitamente foca o input de texto usando a API do DOM diretamente // Nota: nós estamos acessando o campo "current" para obter um nó do DOM. this.textInput.current.focus(); }

render() { // Diz ao React que nós queremos associar o atributo ref do // com o textInput que nós criamos no construtor. return (

Adicionando uma Ref a um Componente de Classe Se nós quisermos envolver o CustomTextInput acima para para simulá-lo sendo clicado imediatamente após a montagem, nós poderiamos usar uma ref para obter acesso ao input customizado e chamar o seu método focusTextInput manualmente.

class AutoFocusTextInput extends React.Component { constructor(props) { super(props); this.textInput = React.createRef(); }

componentDidMount() { this.textInput.current.focusTextInput(); }

render() { return ( ); } } Note que isso só funciona se o CustomTextInput é declarado como uma Classe:

class CustomTextInput extends React.Component { // ... } Refs e Componentes Funcionais Por padrão, você não deve usar um atributo ref em componentes funcionais, pois eles não possuem instâncias:

function MyFunctionComponent() { return ; }

class Parent extends React.Component { constructor(props) { super(props); this.textInput = React.createRef(); } render() { // Isto não vai funcionar! return ( ); } } Se você quer permitir que pessoas passem a ref para seu componente de função, você pode usar forwardRef (possivelmente em conjunto com useImperativeHandle) ou você pode converter o componente para classe.

Você pode, entretanto, usar um atributo ref dentro de um componente funcional contanto que você referencie um elemento DOM ou um componente de classe:

function CustomTextInput(props) { // textInput deve ser declarado aqui para então a ref poder referenciá-lo. const textInput = useRef(null);

function handleClick() { textInput.current.focus(); }

return (

Enquanto você poderia adicionar uma ref a um componente filho, esta não é a solução ideal, pois você obteria apenas uma instância do componente ao invés de um nó DOM. Adicionalmente, isto não funcionaria com componentes funcionais.

Se você usa o React 16.3 ou acima, nós recomendamos usar o encaminhamento de refs para estes casos. Encaminhamento de Refs permitem que os componentes optem por expôr a referência de qualquer componente filho como próprias. Você pode encontrar um exemplo detalhado de como expôr nó DOM de um componente filho para um componente pai na documentação de encaminhamento de ref.

Se você usa React 16.2 ou abaixo, ou se você precisa de mais flexibilidade do que a fornecida pelo encaminhamento de ref, você pode usar esta abordagem alternativa e explicitamente passar uma ref como uma prop diferentemente nomeada.

Quando possível, desaconcelhamos a exposição de nós DOM, mas pode ser uma saída útil. Note que esta abordagem requer que você adicione algum código ao componente filho. Se você não tem controle absoluto sob a implementação do componente filho, a sua última opção é usar o findDOMNode(), mas isto é desencorajado e descontinuado no StrictMode.

Refs com Callback O React também dá suporte a outra forma de atribuír refs chamado “refs com callback”, que dá um controle mais granular sob quando refs são atribuídas e desatribuídas.

Em vez de passar um atributo ref criado pelo createRef(), você passa uma função. A função recebe uma instância de um componente React ou um elemento DOM HTML como seu argumento, que pode ser armazenado e acessado em outro lugar.

O exemplo abaixo implementa um padrão comum: utilizar ref com callback para armazenar uma referência para um nó DOM em uma propriedade de instância.

class CustomTextInput extends React.Component { constructor(props) { super(props);

this.textInput = null;

this.setTextInputRef = element => {
  this.textInput = element;
};

this.focusTextInput = () => {
  // Foca o input de texto usando a API DOM diretamente
  if (this.textInput) this.textInput.focus();
};

}

componentDidMount() { // auto-foca o input na montagem this.focusTextInput(); }

render() { // Utiliza a ref com callback para armazenar uma referência ao elemento DOM // do input de texto em um campo de instância (por exemplo, this.textInput) return (

Você pode passar refs com callback entre componentes, assim como você faz com refs de objetos que foram criados com React.createRef().

function CustomTextInput(props) { return (

class Parent extends React.Component { render() { return ( <CustomTextInput inputRef={el => this.inputElement = el} /> ); } } No exemplo acima, Parent passa sua ref com callback como uma propriedade inputRef do CustomTextInput, e o CustomTextInput passa a mesma função como um atributo ref especial para o . Como resultado, this.inputElement no Parent será atribuído para o nó DOM correspondente ao elemento no CustomTextInput.

API Legada: Refs String Se você trabalhou com React antes, você deve estar familiarizado com uma antiga API onde o atributo ref é uma string, como "textInput", e o nó DOM é acessado como this.refs.textInput. Nós não aconselhamos isto, pois refs string tem alguns problemas, são consideradas abandonadas, e provávelmente serão removidas em um dos futuros releases.

Nota

Se você está usando this.refs.textInput para acessar refs, nós recomendamos ao invés disso utilizar o padrão de callback ou a API createRef.

Ressalvas com Refs com callback Se a ref com callback é definida como uma função inline, ela será chamada duas vezes durante as atualizações, primeiro com null e então novamente com o elemento DOM. Isto porquê uma nova instância da função é criada com cada renderização, então o React precisa limpar a referência antiga e atribuir a nova. Você pode evitar isso definindo a ref com callback como um método ligado a classe, mas note que isto não deveria importar na maioria dos casos.

We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use export default Button and import Button from './Button'.

Aviso em relação ao uso do depreciado findDOMNode O React costumava suportar findDOMNode para procurar na árvore por um elemento DOM dada uma instância de classe. Normalmente, você não precisa disso, já que você pode anexar uma ref diretamente em um elemento DOM.

findDOMNode também pode ser usado em componentes de classe, mas isso estava quebrando níveis de abstração ao permitir que um componente pai demandasse que certos componentes filhos fossem renderizados. Ele cria um risco de refatoração em que você não pode alterar os detalhes de implementação de um componente por que um componente pai pode estar alcançando o seu elemento DOM. findDOMNode somente retorna o primeiro filho, mas com o uso de fragmentos, é possível que um componente renderize múltiplos elementos DOM. findDOMNode é uma API de única leitura. Só enviava resposta quando você chamava. Se um componente filho renderiza um elemento diferente, não há como lidar com essa mudança. Portando, findDOMNode só funcionava se os componentes sempre retornassem um único elemento DOM que nunca muda.

Você pode deixar isso explícito se passar uma ref para o seu componente customizado, passando-a através do DOM usando encaminhamento de ref.

Você também pode adicionar um elemento DOM que envolve o seu componente e anexar uma ref diretamente a ele.

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

Em CSS, o atributo display: contents pode ser usado se você não quer que o elemento faça parte do layout.