红绿灯问题。点击切换颜色

Question

我接受了一次技术面试。我的代码按照说明工作，但我想知道如何通过使用Id和使用一个函数而不是三个函数来优化它。

下面是一个红绿灯说明：

• 如果一个圆圈是白色的，当该圆圈被点击时，它应该用适当的颜色亮起。(顶部=红色，中间=黄色，底部=绿色)

• 如果一个圆圈已经被点亮，当再次点击时，它应该回到白色。

• 一次只能点燃一盏灯。如果一盏灯已经亮了，然后你点击另一个白色的圆圈，那么以前亮过的灯应该是没有亮的，而点击的灯应该会转到合适的颜色。

我想优化的代码：

• I目前有3个函数，我想压缩成一个函数。toggleRed toggleYellow和toggleGreen.每个代码块几乎是相同的。

，

• ，我也想知道是否有更好的方法来使用状态来跟踪什么光是打开的。目前，我有3种不同的useStates来跟踪每种颜色。我觉得有更好的方法来处理这个问题。

我的工作代码：

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>
  );
}

Answer 1

我认为您可以使用状态来存储当前照明光的索引，而不是使用3状态。

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)表示还没有亮灯。litPos用来表示哪个灯是开着的。0代表红色，1代表黄色，2代表绿色。

如果您单击红灯(pos 0)，它将检查当前的listPos。

litPos === 0 ? -1 : 0

如果当前的litPos是0，它意味着打开了正确的灯，所以我们需要将它设置为-1，否则，我们通过将它设置为0来打开它。它也适用于另一种光。

对于背景色，我们只需要根据当前的litPos来改变背景色，此时光线就亮着。

backgroundColor: litPos === 0 ? 'red' : 'white'

Answer 2

我将在onClick中使用一个匿名函数，并将颜色作为字符串传递给函数。

<button
      id="top"
      style={{ backgroundColor: litRed }}
      onClick={()=>toggle("red")}
    />

然后，您可以稍微简化一下切换函数，使其看起来如下：

const toggle = (color) => {
    if(color === "red"){
        if (litRed == "white") {
           setLitRed("red");
        } else {
           setLitRed("white");
        }
        setLitYellow("white");
        setLitGreen("white");
     }
    //Code for yellow and red
  };

此外，为了代码清晰，您可以在const对象中放置“白色”、“红色”、“黄色”和“绿色”，类似于其他语言中的枚举。

const Direction = {
  WHITE: 'WHITE',

……}