如何在 React 功能组件中制作更短的三元条件运算符？

Question

我使用 useState 和 useEffect 挂钩在 React 中制作了一个倒数计时器；一切都很好，但是三元条件运算符几秒钟，我在前面加上 0 并将计数器值 0 替换为 00 以用于显示目的似乎有点过分。有没有办法 simplify/shorten 这个，也许将 Math.floor((counter % (1000 * 60)) / 1000) 设置为 return () 中的一个变量？不确定如何在 React 中执行此操作。

return (
  <div className={styles.timer}>
    <span className={styles.minutes}>
      {Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60))}
    </span>
    <span className={styles.colon}>:</span>
    <span className={styles.seconds}>
      {Math.floor((counter % (1000 * 60)) / 1000) === 0 ?
      `00` :
      Math.floor((counter % (1000 * 60)) / 1000) < 10 ?
      `0${Math.floor((counter % (1000 * 60)) / 1000)}` :
      Math.floor((counter % (1000 * 60)) / 1000)
      }
    </span>
  </div>
)

Answer 1

您可以简单地将此逻辑移动到某个函数中并在此处调用该函数。


handleCounter = (counter) => {
  let floorValue = Math.floor((counter % (1000 * 60)) / 1000)
  if(floorValue < 10){
    return '0' + floorValue
  } else {
    return '' + floorValue
  }
}
return (
  <div className={styles.timer}>
    <span className={styles.minutes}>
      {Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60))}
    </span>
    <span className={styles.colon}>:</span>
    <span className={styles.seconds}>
      {this.handleCounter(counter)}
    </span>
  </div>
)

Answer 2

转成字符串，然后.padStart和'0'变成2个字符。

<span className={styles.seconds}>
  {
    String(Math.floor((counter % (1000 * 60)) / 1000))
      .padStart(2, '0')
  }
</span>

Answer 3

我也觉得有点过分了。您将无法在 return 方法中定义变量，而是可以通过这种方式解决该问题。您可以添加值为 Math.floor((counter % (1000 * 60)) / 1000)

的状态 count

所以组件应该是这样的

function Timer () {
  const [ counter, setCounter ] = useState(0)
  const [ count, setCount ] = useState(0)
  useEffect(() => {
    var timer

    setTimeout(timer = function () {
      setCounter(counter + 1000)
      setCount(Math.floor(((counter + 1000) % (1000 * 60)) / 1000))
    }, 1000)
    return () => {
      clearTimeout(timer)
    }
  }, [counter])

  return (
    <div style={{color: 'white'}}>
      <span>
        {Math.floor(count / 60)}
      </span>
      <span>:</span>
      <span>
        {count === 0 ?
        `00` :
        count < 10 ?
        `0${count}` :
        count
        }
      </span>
    </div>
  )
}

希望这对你有用..

如何在 React 功能组件中制作更短的三元条件运算符？

How to make a shorter ternary conditional operator in a React functional component?

javascript

conditional-operator

reactjs