React 实现简易计数器

最简单的计数器实现，使用 useState 管理状态

• ClickAdd：实现加 1 操作

• ClickMinus：实现减 1 操作

• setZero：计数器归零

子父组件通过 props 传递参数，参数可用解构赋值的语法

当数字大于 10 时，字体为红色，反之为蓝色

import { useState } from "react";

function CountLabel({count}) {
  const color = count > 10 ? "red" : "blue";
  return (
    <p style={{color}}>{count}</p>
  )
}


export default function Counter() {
  const [count, setCount] = useState(0);
  function ClickAdd() {
    setCount(count + 1)
  };
  function ClickMinus() {
    if(count <= 0) {
      setZero()
    } else {
      setCount(count-1);
    }
  };
  function setZero() {
    setCount(0);
  }

  return (
    <div>
      <button onClick={setZero}>清零</button>
      <button onClick={ClickAdd}>+</button>
      <button onClick={ClickMinus}>-</button>
      <CountLabel count={count} />
    </div>
  );
}