Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

No uses getElementById() en React, usa las referencias

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.

No uses getElementById() en React, usa 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

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal