Quiero hacer algo como un reloj con reacción. Espero hacerlo con la ayuda de ref, pero a veces no funciona. ¿Hay otra solución a esta tarea, o lo que hago mal?
import React, { useRef } from 'react'; import classes from "./Synchroniser.module.css"; const Synchroniser = () => { const point:any = useRef(null); var k = 0; if (point.current !== null) { setInterval(()=>{ if(k<360){ k++; console.log(k); }else{k=0} point.current.style.transform = `rotate(${k}deg)`; },100); }else{ console.log(0) } return( <div> <h1 ref={point}>RLY?</h1> </div> ); }; export default SynchroniserIr al final para la solución CSS pura
Solución de reacción
Esto resuelve su problema, pero la variable k agrega el doble de lo que necesita, no sé por qué. Para que la variable k persista entre estados y no reinicie el reloj en cada renderizado, también debe usarla con useRef.
const point = useRef(null); const k = useRef(0); useEffect(() => { if (point.current !== null) { setInterval(() => { if (k.current < 360) { k.current = k.current + 1; } else { k.current = 0; } point.current.style.transform = `rotate(${k.current}deg)`; }, 1000); } else { console.log("0"); } },[]);Código de solución CSSSandbox Link
JSX
<div className="clock"> <div className="spin"></div> </div>CSS
.clock { height: 250px; width: 250px; border-radius: 9999px; display: flex; justify-content: center; align-items: center; background: #eeeeee; } .spin { width: 90%; height: 2px; position: relative; background: white; -webkit-animation:spin 60s linear infinite; -moz-animation:spin 60s linear infinite; animation:spin 60s linear infinite; } .spin::after, .spin::before { height: 2px; content: " "; position: absolute; top: 0; width: 50%; } .spin::after { right: 0; background-color: black; } .spin::before { left: 0; background-color: #eeeeee; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }