React中如何用三元运算符按条件切换图片类？是否需useEffect重渲染？

不需要用useEffect，React中状态更新本身就会触发组件重渲染，你的问题大概率出在状态更新的逻辑细节上，具体排查和修复方案如下：

1. 修复状态更新的闭包问题 #

你的UpgradeClickPower函数直接引用了currentMana、currentClickUpgradeCost这些状态值，当组件重渲染后，函数捕获的还是旧的状态快照，会导致判断逻辑出错，甚至setClickPower根本没被执行。

改成函数式更新来获取最新状态值：

const UpgradeClickPower = (newPower, upgradeCost) => {
  setMana(prevMana => {
    // 用prevMana拿到最新的 mana 状态
    if (prevMana < currentClickUpgradeCost) {
      alert('Not Enough Mana!!');
      return prevMana; // 不更新mana
    } else {
      setClickPower(newPower);
      setClickUpgradeCost(upgradeCost);
      return prevMana - currentClickUpgradeCost;
    }
  });
};

如果currentClickUpgradeCost也是状态变量，同样要用函数式更新获取它的最新值：

const UpgradeClickPower = (newPower, upgradeCost) => {
  setMana(prevMana => {
    return setClickUpgradeCost(prevCost => {
      if (prevMana < prevCost) {
        alert('Not Enough Mana!!');
        return prevCost;
      } else {
        setClickPower(newPower);
        return upgradeCost;
      }
    });
  });
};

2. 验证状态是否真的更新 #

在组件内添加日志，确认currentClickPower的值是否正确变化：

console.log('当前点击力:', currentClickPower);

如果值确实≥5但类没切换，检查CSS类名是否写错，比如BlueOrb的样式是否被其他规则覆盖，或者滤镜属性是否正确设置。

3. 简化类名判断写法 #

把类名拼接改成更清晰的模板字符串写法，避免语法错误：

<img 
  className={`Orb ${currentClickPower >= 5 ? 'BlueOrb' : ''}`} 
  src={Orb} 
  alt="Mana Orb" 
  height="200"
/>

内容的提问来源于stack exchange，提问作者Tolga.Ulukan