问如何根据动态开/关时间同步显示2种不同颜色的2个组件(交通灯)

EN

const [bottomToUp, setBottomToUp] = useState({
  greenLight: true,
  greenOnTime: 1,
  totalSemaphoreTime: 3,
})
/** Using ref here because the state changes would cause the useEffect hook to reevaluate and clear the previous timeout before it was completed */
const bottomToUpRef = useRef(bottomToUp)
bottomToUpRef.current = bottomToUp

const fetchNewGreenOnTimeFromAPI = () => {
  const newGreenOnTime = getFromAPI()
  setBottomToUp(prev => ({ ...prev, greenOnTime: newGreenOnTime }))
}

useEffect(() => {
  let timeoutId

  const timeout = () => {
    return setTimeout(
      () => {
        setBottomToUp(prevState => ({
          ...prevState,
          greenLight: !prevState.greenLight,
          timerStarted: false,
        }))
        timeoutId = timeout()
      },
      bottomToUpRef.current.greenLight
        ? bottomToUpRef.current.greenOnTime * 1000
        : (bottomToUpRef.current.totalSemaphoreTime -
            bottomToUpRef.current.greenOnTime) *
            1000 /** Only using the greenLight as parameter since red light is dependent on green light */,
    )
  }

  timeoutId = timeout()

  return () => {
    clearTimeout(
      timeoutId,
    ) /** You should always clear timeout when component unmounts */
  }
}, [])

return (
  <div>
    {/** Switched the right to left semaphore values to be reflected from the bottomToUp state since they are dependent */}
    <TrafficLight
      RedOn={bottomToUp.greenLight}
      GreenOn={!bottomToUp.greenLight}
    />
    <TrafficLight
      RedOn={!bottomToUp.greenLight}
      GreenOn={bottomToUp.greenLight}
    />
  </div>
)