Selecione Elementos DOM em React

Em um ponto ou outro, todo desenvolvedor de JavaScript usou o método getElementById(). Leva um argumento id e retorna um elemento HTML com esse ID. Este método é extremamente útil para fazer mutações DOM manuais.

Pegar um nó de elemento HTML é uma necessidade comum. Muitos desenvolvedores com experiência em JavaScript, mas novos no framework React, querem saber como realizar esta operação no React.

Refs em React

Refs, abreviação de referências, são uma maneira fácil de acessar o DOM no React. Para vincular o elemento (ou componente) a uma referência, o elemento deve ter um atributo ref que seja igual ao seu ref. Um elemento de amostra <div> pode ser vinculado a testRef desta forma: <div ref={this.testRef}></div>. É uma boa prática armazenar instâncias ref em uma variável.

em componentes funcionais

Desde a introdução dos ganchos há cerca de dois anos, os componentes funcionais tornaram-se muito mais robustos. Se você estiver executando uma versão moderna do React (por exemplo, 16.8.0), pode importar o gancho useRef(), que pode ser usado para definir um ref. Aqui está um exemplo de um componente funcional que faz referência a uma variável aleatória durante a renderização:

function App() {
    const elementVariable = useRef(null)
    useEffect(() => console.log(elementVariable), [] )
    return (
        <div ref={elementVariable}>
           <h1></h1> 
        </div>
    )
}

Neste exemplo, definindo elementVariable igual à instância do gancho useRef(), estamos armazenando o nó HTML na variável.

O gancho não funcionará a menos que o elemento HTML tenha um atributo ref definido para o nome da variável.

Um argumento passado para o gancho useRef() especifica o valor inicial da instância ref. Assim que o elemento <div></div> for montado, a variável conterá o valor do nó HTML. Esta será a aparência do console:

em componentes de classe

Por muito tempo, usar componentes de classe foi a maneira padrão de criar componentes React interativos.

Desde o lançamento da versão 16.3, os desenvolvedores do React podem usar React.createRef() para criar um ref. A API pode ser diferente, mas os ganchos React.createRef() e useRef() criam essencialmente as mesmas instâncias ref.

Em componentes de classe, a instância ref é armazenada em uma propriedade de classe. Aqui está um exemplo:

class App extends Component {
  constructor(props){
    super(props)
    this.ref = React.createRef()
  }
  componentDidMount(){
    console.log(this.ref);
  }
  render() {
    return <h1 ref={this.ref}>Referenced Text</h1>;
  }
}

Se você olhar para o console, verá um objeto com a propriedade current que contém o nó HTML.

Os desenvolvedores que usam React versão > 16.3 devem usar uma sintaxe ligeiramente diferente para criar refs. Exemplo:

<div ref={(element) => this.ref = element}></div>

A referência criada dessa forma é chamada de retorno de chamada ref porque definimos o atributo ref para uma função de retorno de chamada que recebe o elemento HTML como um argumento e atribui esse valor à propriedade ref da instância da classe.