Seleccionar elementos DOM en React

En un momento u otro, todos los desarrolladores de JavaScript han utilizado el método getElementById(). Toma un argumento id y devuelve un elemento HTML con ese ID. Este método es extremadamente útil para realizar mutaciones DOM manuales.

Tomar un nodo de elemento HTML es una necesidad común. Muchos desarrolladores con experiencia en JavaScript, pero nuevos en el marco de React, quieren saber cómo realizar esta operación en React.

Refs en React

Las referencias, abreviatura de referencias, son una forma fácil de acceder al DOM en React. Para vincular el elemento (o componente) con una referencia, el elemento debe tener un atributo ref que sea igual a su ref. Un elemento <div> de muestra se puede vincular a testRef de esta manera: <div ref={this.testRef}></div>. Es una buena práctica almacenar instancias ref en una variable.

en Componentes Funcionales

Desde la introducción de los ganchos hace aproximadamente dos años, los componentes funcionales se han vuelto mucho más robustos. Si está ejecutando una versión moderna de React (por ejemplo, 16.8.0), puede importar el gancho useRef(), que puede usarse para definir una ref. A continuación, se muestra un ejemplo de un componente funcional que hace referencia a una variable aleatoria durante el renderizado:

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

En este ejemplo, al establecer elementVariable igual a la instancia del gancho useRef(), estamos almacenando el nodo HTML en la variable.

El gancho no funcionará a menos que el elemento HTML tenga un atributo ref establecido en el nombre de la variable.

Un argumento pasado al gancho useRef() especifica el valor inicial de la instancia ref. Una vez que se ha montado el elemento <div></div>, la variable contendrá el valor del nodo HTML. Así es como se verá la consola:

en componentes de clase

Durante mucho tiempo, el uso de componentes de clase fue la forma predeterminada de crear componentes de React interactivos.

Desde el lanzamiento de la versión 16.3, los desarrolladores de React pueden usar React.createRef() para crear una ref. La API puede ser diferente, pero tanto el gancho React.createRef() como el gancho useRef() crean esencialmente las mismas instancias de referencia.

En los componentes de clase, la instancia ref se almacena en una propiedad de clase. He aquí un ejemplo:

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>;
  }
}

Si observa la consola, verá un objeto con la propiedad current que contiene el nodo HTML.

Los desarrolladores que usan React versión> 16.3 deben usar una sintaxis ligeramente diferente para crear referencias. Ejemplo:

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

La referencia creada de esta manera se llama callback ref porque establecemos el atributo ref en una función callback que toma el elemento HTML como argumento y asigna este valor a la propiedad ref de la instancia de la clase.