如何在React中结合if语句与useState修改背景颜色

你现有代码已经通过useState声明了颜色状态，但缺少温度下降时的颜色重置逻辑，且需要将颜色状态绑定到元素样式上才能生效，以下是完善后的实现：

完整代码示例 #

import { useState } from 'react';

function TemperatureControl() {
  const [temperatureValue, setTemperatureValue] = useState(10);
  const [temperatureColor, setTemperatureColor] = useState({ color: "navyblue" });
  const [isChecked, setIsChecked] = useState(false);

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

    const newTemperature = temperatureValue + 1;
    setTemperatureValue(newTemperature);

    // 温度升至15℃及以上时切换颜色
    if (newTemperature >= 15) {
      setTemperatureColor({ color: isChecked ? "navyblue" : "red" });
    }
  };

  const TemperatureDecrement = () => {
    const newTemperature = temperatureValue - 1;
    setTemperatureValue(newTemperature);

    // 温度降至15℃以下时恢复初始颜色
    if (newTemperature < 15) {
      setTemperatureColor({ color: "navyblue" });
    }
  };

  return (
    <div style={{ backgroundColor: temperatureColor.color, padding: '20px', color: '#fff' }}>
      <p>当前温度: {temperatureValue}°C</p>
      <button onClick={TemperatureIncrement}>升温</button>
      <button onClick={TemperatureDecrement}>降温</button>
      <label style={{ marginLeft: '10px' }}>
        <input 
          type="checkbox" 
          checked={isChecked} 
          onChange={() => setIsChecked(!isChecked)}
        />
        切换颜色规则
      </label>
    </div>
  );
}

export default TemperatureControl;

关键调整点 #

• 在TemperatureDecrement函数中补充温度下降时的颜色逻辑，保证温度低于阈值时背景色同步恢复
• 将temperatureColor的颜色值绑定到容器的backgroundColor属性，让状态变更直接作用于页面样式
• 补充isChecked状态的完整声明（假设你原本有该开关逻辑但未展示），确保颜色切换规则能正常运行

核心逻辑说明 #

使用计算后的newTemperature作为判断依据，避免依赖异步更新的temperatureValue状态值，保证逻辑准确性。每次温度变化时，通过setTemperatureColor修改颜色状态，React会自动触发组件重渲染，实时更新背景样式。

内容的提问来源于stack exchange，提问作者Javed Abbas