Como selecionar um elemento DOM no React? Qual é o equivalente de document.getElementById() em React

No React, ao contrário de trabalhar com JavaScript vanilla, acessar diretamente os elementos DOM é diferente. O React usa um DOM virtual para atualizar com eficiência o DOM real, o que o torna diferente do JavaScript vanilla.

Como acessar um elemento DOM

Opção 1: usando Refs

• Use Refs com componentes de função:(v16.8.0) Use useRef e forwardRef. Defina a ref com useRef e encaminhe-a para o elemento DOM usando forwardRef. Para acessar o elemento, use a propriedade atual do ref (ref.current).

Opção 2: Usando React.createRef (v16.3 )

• Crie uma referência usando React.createRef() e anexe-a a um elemento para acessá-la mais tarde. Use ref.current para obter o nó DOM.

Opção 3: usando padrão de retorno de chamada (legado)

• Defina o atributo ref no JSX elemento e passe uma função de retorno de chamada que recebe a referência ao elemento DOM.

Opção 4: Usando String Refs (Legado)

• Use refs de string definindo o atributo ref como uma string que identifica o elemento DOM. Acesse o elemento usando this.refs.[stringRef].

Exemplo

Abaixo está um exemplo de uso do padrão de retorno de chamada para selecionar um elemento DOM:

  render() {
    return (
      

        
Para acessar os elementos, você pode usar this.progressBars[0], this.progressBars[1] e this.progressBars[2] para realizar operações neles.