Codificación mundial
return ( <div className="header-container item"> <div className="header-item title-container"> <h1 className="title" style={{color: colour1}}>HELLO</h1> <h1 className="title" style={{color: colour2}}>CODING</h1> <h1 className="title" style={{color: colour3}}>WORLD</h1> </div> <div className="header-item"/> </div> );Digamos que tengo lo anterior, quiero iterar a través de cada elemento uno a la vez y convertir el color en dorado.
Entonces, en cualquier momento, solo una de las palabras debe ser dorada. Primero Hello debe ser dorado, luego Coding debe ser dorado y luego World debe ser dorado.
Traté de hacerlo para que cambiara cada segundo. Hay ejemplos de cómo cambiar un color cada segundo, pero no puedo encontrar un ejemplo de cómo hacerlo con tres elementos diferentes para que no entren en conflicto.
Vea mi lamentable intento a continuación
const d = new Date(); let time = d.getTime().toString().split(""); console.log(time) const lastEl = time[time.length - 1] console.log("lastEl", lastEl) const [timer, setTimer] = useState(lastEl) const [colour1, setColour1] = useState("white") const [colour2, setColour2] = useState("white") const [colour3, setColour3] = useState("white") useEffect(()=> { if(parseInt(lastEl) === 0 || parseInt(lastEl) === 1 || parseInt(lastEl) === 2 || parseInt(lastEl) === 3) { setColour1("yellow") setColour2("white") setColour3("white") } else if (parseInt(lastEl) === 4 || parseInt(lastEl) === 5 || parseInt(lastEl) === 6) { setColour1("white") setColour2("yellow") setColour3("white") } else { setColour1("white") setColour2("white") setColour3("yellow") } }, [timer] )Usando setInterval se puede hacer de la siguiente manera
function App() { const [time, setTime] = React.useState(1); const [speed, setSpeed] = React.useState(1000); const [colour1,setColour1] = React.useState("white"); const [colour2,setColour2] = React.useState("white"); const [colour3,setColour3] = React.useState("white"); const timer = React.useRef(null); React.useEffect(() => { runInterval(); }, []); React.useEffect(() => { window.clearInterval(timer.current); setTime(1); runInterval(); }, [speed]); function runInterval(){ timer.current = window.setInterval(() => { setTime(prevTime => prevTime >= 9 ? 1 : prevTime + 1); }, speed); return () => { window.clearInterval(timer.current); }; } React.useEffect(() => { if([1,2,3].includes(time)){ setColour1("yellow") setColour2("white") setColour3("white") } else if([4,5,6].includes(time)){ setColour1("white") setColour2("yellow") setColour3("white") } else{ setColour1("white") setColour2("white") setColour3("yellow") } }, [time]); return ( <div>Seconds: {time} <button onClick={() => setSpeed(500)}>x2 speed</button> <button onClick={() => setSpeed(1000)}>normal speed</button> <div style={{backgroundColor: "black"}}> <h1 className="title" style={{color: colour1}}>HELLO</h1> <h1 className="title" style={{color: colour2}}>CODING</h1> <h1 className="title" style={{color: colour3}}>WORLD</h1> </div> </div> ); } ReactDOM.render(<App />, document.querySelector('#app')); <div id="app"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>