Aquí te dejo el código completo para que lo analices
import React,{useState, useRef} from 'react';
import ReactDOM from 'react-dom';
//Refs React en componentes de clases
class Componente extends React.Component{
constructor(props){
super(props);
this.referencia = React.createRef();
this.state ={
mensaje: ["C","u","r","s","o"," ","d","e"," ","R","e","a","c","t"," ","J","S"," ","b","y"," ","E","W","e","b","i","k"]
}
}
componentDidMount(){
let contador = 0;
let strMensaje = "";
let mensaje = this.state.mensaje;
setInterval(()=>{
strMensaje += mensaje[contador];
this.referencia.current.innerText = strMensaje;
contador++;
if(contador >= mensaje.length){
strMensaje="";
contador=0;
}
},200);
}
render(){
return(
<div>
<h1 ref={this.referencia}>Curso de React JS by EWebik</h1>
</div>
);
}
}
ReactDOM.render(
<Componente />,
document.getElementById('root')
);
Bien ahora para utilizar referencias en componentes funcionales debemos utilizar un Hook, no explicare que son los Hooks en este momento ya que tendremos una clase dedicada a este tema, por el memento solo veremos el Hook useRef el cual permite manejar referencias en functional component.
Dentro de tu componente solo basta con crear una variable o constante que se iguala a useRef().
function Componente(){
...
const referencia = useRef();
...
}
Esto es equivalente a utilizar this.referencia = React.createRef();
Ahora para hacer el mismo efecto y funcionalidad que en componente de clase necesitamos agregar un state y unas cuantas variables más de control, por ejemplo, aquí te dejo el código completo del componente.
//Refs React en componentes funcionales
function Componente1(){
const [ini, setIni] = useState(true);
const [state, setState] = useState({
mensaje: ["C","u","r","s","o"," ","d","e"," ","R","e","a","c","t"," ","J","S"," ","b","y"," ","E","W","e","b","i","k"]
});
const referencia = useRef();
const animacion = ()=>{
let contador = 0;
let strMensaje = "";
let mensaje = state.mensaje;
setInterval(()=>{
strMensaje += mensaje[contador];
referencia.current.innerText = strMensaje;
contador++;
if(contador >= mensaje.length){
strMensaje="";
contador=0;
}
},100);
}
if(ini){
setIni(false);
animacion();
}
return(
<div>
<h1 ref={referencia}>Curso de React JS by EWebik</h1>
</div>
);
}
Ya que no hemos visto más Hooks, limitamos la ejecución de la función animación, a través de una variable de estado.
Te recomiendo ver el vídeo para ver ambos ejemplos en acción ya que quizá en este post no se alcanza a comprender perfectamente el funcionamiento.
Existen muchas librerías que no precisamente están homologadas con React y que requieren una referencia directa a la DOM, aquí tenemos un buen ejemplo de cuando debemos usar las Refs.
Aquí te dejo un ejemplo utilizando la librería Chart.js, la cual nos permite crear gráficas de una forma bastante fácil.
//Refs React y librerías de terceros
class Componente extends React.Component{
constructor(props){
super(props);
this.referencia = React.createRef();
}
componentDidMount(){
var ctx = this.referencia.current.getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
render(){
return(
<div>
<h1 ref={this.referencia}>
Curso de React JS by EWebik
</h1>
<canvas id="myChart"
ref={this.referencia}
style={{width:400, height:400}}></canvas>
</div>
);
}
}
Espero que te este gustando este curso de React, por favor ayúdame compartiendo en redes sociales para llegar a más gente que no cuente con la posibilidad de pagar un curso de esta índole. Nos vemos en el siguiente capítulo.
