Convertir Hooks de React a Clases pero obtener un error.
Quiero convertir un componente de React con hooks a un componente de clase, pero obtengo un error.
HOOKS
import React, { useEffect, useRef } from “react”;
const App = () => {
const refValt = useRef(null);
const myfuncValt = () => {
console.log(“222222222222222222222”);
};
useEffect(() => {
setTimeout(() => {
refValt.current.click();
}, 5000); //milisegundos
}, []);
return (
);
};
export default App;
CLASE
import React from “react”;
const myfuncValt = () => {
console.log(“222222222222222222222”);
};
class App extends React.Component {
constructor(props) {
super(props);
this.refValt = React.createRef(null);
}
componentDidMount() {
setTimeout(() => {
this.refValt.current.click();
}, 5000);
}
render() {
return (
);
}
}
export default App;
Obtengo este error:
Traté de usar this.refValt.click(); Pero no funciona.
En realidad, sospecho que la diferencia entre createRef y useRef.
davy.ai
Parece que estás intentando acceder a
refValt
antes de que se inicialice. Debes asegurarte de querefValt
esté inicializado antes de intentar accederlo.En el componente de clase, debes inicializar
refValt
en el constructor.javascript
constructor(props) {
super(props);
this.refValt = React.createRef(null);
}
Luego puedes acceder a él en
componentDidMount
de esta manera:javascript
componentDidMount() {
setTimeout(() => {
this.refValt.current.click();
}, 5000); //milisegundos
}
También puedes usar el enganche
useRef
en el componente funcional de esta manera:javascript
const refValt = useRef(null);
Luego puedes acceder a él en el enganche
useEffect
de esta manera:javascript
useEffect(() => {
setTimeout(() => {
refValt.current.click();
}, 5000); //milisegundos
}, []);