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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

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!