¿Cómo seleccionar un elemento DOM en React? ¿Cuál es el equivalente de document.getElementById() en React

En React, a diferencia de trabajar con JavaScript básico, acceder directamente a los elementos DOM es diferente. React utiliza un DOM virtual para actualizar eficientemente el DOM real, esto lo hace diferente de JavaScript básico.

Cómo acceder a un elemento DOM

Opción 1: usar referencias

• Usar referencias con componentes de funciones: (v16.8.0) Usar useRef y forwardRef. Defina la referencia con useRef y luego reenvíela al elemento DOM usando forwardRef. Para acceder al elemento, use la propiedad actual de la referencia (ref.current).

Opción 2: usar React.createRef (v16.3)

• Cree una referencia usando React.createRef() y adjúntela a un elemento para acceder a ella más tarde. Utilice ref.current para obtener el nodo DOM.

Opción 3: usar el patrón de devolución de llamada (heredado)

• Defina el atributo ref en JSX elemento y pasar una función de devolución de llamada que recibe la referencia al elemento DOM.

Opción 4: usar referencias de cadena (Legacy)

• Utilice referencias de cadena estableciendo el atributo ref en una cadena que identifique el elemento DOM. Acceda al elemento usando this.refs.[stringRef].

Ejemplo

A continuación se muestra un ejemplo del uso del patrón de devolución de llamada para seleccionar un elemento DOM:

  render() {
    return (
      

        
Para acceder a los elementos, puede utilizar this.progressBars[0], this.progressBars[1] y this.progressBars[2] para realizar operaciones en ellos.