在React中如何使用useState钩子在if语句中动态改变背景颜色

Question

const [temperatureColor, setTemperatureColor] = useState({color:"navyblue"});

const TemperaturIncrement = () => {
    if (temperatureValue === 30) return;

    const newTemperature =  temperatureValue + 1;

    setTemperatureValue(newTemperature)

    if(newTemperature >= 15 ){
        setTemperatureColor({ color: isChecked ? "navyblue" : "red" });
    } 
}

const TemperaturDecrement = () => {
    setTemperatureValue(temperatureValue - 1)
}

我想在if语句中使用useState来改变背景颜色

Answer 1

你应该将你的状态变量设置为一个字符串，像下面这样：

const [temperatureColor, setTemperatureColor] = useState("navyblue");

然后像下面这样更新该值：

setTemperatureColor(isChecked ? "navyblue" : "red");

并在你的JSX中使用该字符串值，像下面这样：

<View style={{ color: temperatureColor }}></View>

希望这能帮到你。