Tuve una entrevista técnica. Mi código funciona de acuerdo con las instrucciones, pero quiero saber cómo podría haberlo optimizado usando los Id y usando una sola función en lugar de tres.
A continuación se muestran las instrucciones de un semáforo:
Si un círculo es blanco, cuando se hace clic en ese círculo, debe iluminarse con el color apropiado. (Arriba = rojo, medio = amarillo, abajo = verde)
Si un círculo ya está encendido, al hacer clic de nuevo, debería volver a ser blanco.
Solo se puede encender una luz a la vez. Si una luz ya está encendida y hace clic en otro círculo blanco, la luz previamente encendida debería apagarse y la luz en la que hizo clic debería cambiar al color apropiado.
código que quiero optimizar:
Actualmente tengo 3 funciones que me gustaría condensar en una sola. toggleRed toggleYellow y toggleGreen . Cada bloque de código es casi idéntico.
También me pregunto si hay una mejor manera de usar el estado para realizar un seguimiento de qué luz está encendida. Actualmente, tengo 3 estados de uso diferentes para realizar un seguimiento de cada color. Siento que había una mejor manera para mí de manejar este problema.
Mi código de trabajo:
import "./styles.css"; import React, { useState } from "react"; export default function App() { const [litRed, setLitRed] = useState("white"); const [litYellow, setLitYellow] = useState("white"); const [litGreen, setLitGreen] = useState("white"); const toggleRed = (e) => { if (litRed == "white") { setLitRed("red"); setLitYellow("white"); setLitGreen("white"); } else { setLitRed("white"); setLitYellow("white"); setLitGreen("white"); } }; //setLitYellow("yellow") const toggleYellow = (e) => { }; //setLitGreen("green") const toggleGreen = (e) => { }; return ( <div className="App"> <div id="traffic-light"> <button id="top" style={{ backgroundColor: litRed }} onClick={toggleRed} /> <button id="middle" style={{ backgroundColor: litYellow }} onClick={toggleYellow} /> <button id="bottom" style={{ backgroundColor: litGreen }} onClick={toggleGreen} /> </div> </div> ); }Creo que puede usar un estado para almacenar el índice de la luz encendida actual en lugar de usar 3 estados.
import "./styles.css"; import React, { useState } from "react"; export default function App() { const [litPos, setLitPos] = useState(-1); return ( <div className="App"> <div id="traffic-light"> <button id="top" style={{ backgroundColor: litPos === 0 ? 'red' : 'white' }} onClick={() => setLitPos(litPos === 0 ? -1 : 0)} /> <button id="middle" style={{ backgroundColor: litPos === 1 ? 'yellow' : 'white' }} onClick={() => setLitPos(litPos === 1 ? -1 : 1)} /> <button id="bottom" style={{ backgroundColor: litPos === 2 ? 'green' : 'white' }} onClick={() => setLitPos(litPos === 2 ? -1 : 2)} /> </div> </div> ); } useState(-1) que indica que aún no se ha encendido ninguna luz. litPos se utiliza para indicar qué luz está encendida. 0 es para rojo, 1 es para amarillo y 2 es para verde.
Si hace clic en la luz roja (pos 0), comprobará la listPos actual.
litPos === 0 ? -1 : 0
Si el litPos actual es 0, significa que la luz derecha está encendida, por lo que debemos apagarla volviendo a establecerla en -1; de lo contrario, la encenderemos posicionándola en 0. También se aplica a la otra luz.
Para el color de fondo, solo necesitamos cambiar el color de fondo según el litPos actual, cuya luz está encendida en este momento.
backgroundColor: litPos === 0 ? 'red' : 'white'
Usaría una función anónima en onClick y pasaría el color como una cadena a la función.
<button id="top" style={{ backgroundColor: litRed }} onClick={()=>toggle("red")} />Y luego puede simplificar ligeramente la función de alternar para que se vea así:
const toggle = (color) => { if(color === "red"){ if (litRed == "white") { setLitRed("red"); } else { setLitRed("white"); } setLitYellow("white"); setLitGreen("white"); } //Code for yellow and red };Además, para mayor claridad del código, puede poner "blanco", "rojo", "amarillo" y "verde" en un objeto const, similar a las enumeraciones en otros idiomas.
const Direction = { WHITE: 'WHITE',... };