Como acessar elemento de DOM em React JS

Neste artigo você vai aprender a como acessar elemento de DOM em React JS, ou seja, uma ação equivalente aos métodos de JavaScript puro

Fala programador(a), beleza? Bora aprender a trabalhar com DOM em React JS!

Para acessar um elemento em React como se estivesse em JavaScript vanilla com métodos como querySelector, você vai precisar de um hook

O hook em questão é o useRef, que vai criar uma referência do elemento alvo

E assim você pode acessá-lo sem problemas! 🙂

Veja um exemplo prático:

import { useRef } from "react";

Primeiramente faça a importação do hook

const myElement = useRef(null);

Dentro do componente defina uma nova variável com o useRef, isso inicializa o hook

<div ref={myElement}>Element com ref</div>

Agora defina o atributo ref com o nome da variável que você criou anteriormente, e pronto

O seu elemento já está referenciado e pode ser acessado no componente

Você vai acessar o elemento da seguinte forma:

console.log(myElement.current)

Aqui utilizei um console.log para você ver o que há no elemento

Mas basta acessar a sua variável com a propriedade current

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você viu como acessar elemento de DOM em React

Utilizamos o hook useRef, que cria uma referência com um elemento do DOM

Você pode inicializar o hook quantas vezes precisar, ou seja, ter vários elementos selecionados

Lembre-se de importá-lo e também acessar o elemento pela propriedade current

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!