在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>

希望這能幫到你。