REACTJSJAVASCRIPT

No uses getElementById() en React, usa las referencias

16 abr. 2018|Lectura de 2 minutos

React.js usa un virtual DOM por lo que métodos como getElementById() o querySelector() nos pueden dar problemas. En React lo correcto es usar las referencias.

Las referencias de React son una forma de acceder a los elementos del DOM que han sido creados en el metodo render(), puesto que React utiliza un virtual DOM, utilizar métodos como getElementById() o querySelectorAll() para referenciar elementos no son la mejor forma de trabajar y nos pueden dar problemas.

La forma de crear estas referencias es la siguiente:

class App extends Component {
  constructor() {
    super()
    this.title = React.createRef()
  }
  render() {
    return (
      <div className="App">
        <h1 ref = { this.title }>Hola comunidad</h1>
      </div>
    );
  }
}

Lo que estamos haciendo es crear una referencia que llamaremos title en el constructor de nuestro componente App con la función createRef() de React,después en un h1 dentro del método render() le asignamos al atributo ref la referencia previamente creada en el constructor, de esta manera enlazamos este nodo del DOM a nuestra referencia.

Ahora lo que haremos sera cambiar el color de este h1 al presionar un botón utilizando la referencia.

<button onClick = { this.changeColor }>Cambiar color</button>
changeColor() {
    console.log(this.title)
  }

En este método primero que todo mostramos por consola la referencia la cual se verá algo así:

Referencia

Como podemos ver la referencia es un objeto en el cual su propiedad current representa al nodo.

Cambiar el color del elemento es tan sencillo cómo esto

this.title.current.style.color = 'tomato'

Accedemos a la propiedad current de la referencia title, y cómo está propiedad es un elemento HTML podemos acceder a sus diversos métodos y propiedades, y de esta manera cambiamos el color de este elemento. El código completo de este componente es el siguiente

class App extends Component {
  constructor() {
    super()
    this.title = React.createRef()
    this.changeColor = this.changeColor.bind( this )
  }

  changeColor() {
    console.log(this.title)
    this.title.current.style.color = 'tomato'
  }
  render() {
    return (
      <div className="App">
        <h1 ref = { this.title }>Hola comunidad</h1>
        <button onClick = { this.changeColor }>Cambiar color</button>
      </div>
    );
  }
}

Cuando usar estas referencias

Según la propia documentación de React se recomienda usar las referencias en las siguientes situaciones:

  1. Manejo de de inputs, seleccion de texto
  2. Manejo de animaciones
  3. Integración con otras librerias que manipulen el DOM

Espero que les haya gustado y por supuesto para más información los invito a revisar la documentación de React.

Recuerda que en EDteam tenemos un excelente curso de React para que aprendas esta maravillosa tecnología.

Hasta la próxima