Accede a un elemento DOM en React

1. Alternativa a getElementById() en React
2. Refs en React Componentes Funcionales
3. Referencias en los componentes de la clase React

React es un marco basado en JavaScript, pero funciona con un DOM virtual. React API comprende diferentes métodos y propiedades que los de JavaScript nativo.

Al crear aplicaciones web, los desarrolladores suelen utilizar el método Document.getElementById(). Este método puede especificar la identificación y trabajar con elementos HTML específicos.

Alternativa a getElementById() en React

React tiene sus propias reglas y capas de sistemas construidos sobre la interfaz nativa de JavaScript. Para acceder a nodos DOM específicos en React, tenemos que usar refs en lugar de usar el método Document.getElementById().

Refs se puede usar para muchos propósitos diferentes, como obtener el valor ingresado en los elementos de entrada, controlar la apariencia de los elementos cuando se enfocan, reproducir animaciones y más.

Aún así, de forma predeterminada, React sigue un enfoque declarativo para construir la interfaz de usuario de la aplicación. Refs son una excepción a este enfoque, por lo que deben usarse solo en casos excepcionales.

Refs en React Componentes Funcionales

Desde la introducción de ganchos en React v16.8, los desarrolladores pueden crear refs en componentes funcionales. El enlace useRef se puede importar desde la biblioteca principal de React.

Echemos un vistazo a este ejemplo.

import "./styles.css";
import { useRef } from "react";
export default function App() {
  const header = useRef(null);
  console.log(header);

  return (
    <div className="App">
      <h1 ref={header}>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Inicializamos la variable header a una ref con un valor null.

En JSX, establecemos el atributo ref del elemento <h1> en esta variable. Luego console.log() la variable, y si revisa la consola en esta demostración en vivo, la variable contiene el valor que representa el nodo DOM <h1>.

Referencias en los componentes de la clase React

Los desarrolladores de React también pueden usar la sintaxis de Clase para crear componentes. En este ejemplo, tenemos un componente que hace lo mismo que el componente funcional del ejemplo anterior.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.header = React.createRef();
  }
  render() {
      return <h1 ref={this.header}>Hello CodeSandbox</h1>;
  }
}

La principal diferencia es la sintaxis. Usamos el método React.createRef() para configurar la ref.