React中如何在className内使用三元运算符？（Tailwind场景）

你的模板字符串逻辑本身没问题，报错核心原因是没遵守JSX语法规范——在JSX中给className绑定动态值时，必须把模板字符串放在大括号{}内部。

修正后的完整代码：

<button 
  className={`w-32 h-32 rounded-2xl ${!checked ? 'bg-white-200' : 'bg-orange'}`}
  onClick={() => setClicked(!checked)}
>
  {/* 此处放置按钮文本或图标 */}
</button>

额外排查点： #

• 确认checked和setClicked已通过useState正确声明，示例：

  const [checked, setClicked] = useState(false);
  

• 检查Tailwind类名拼写：默认Tailwind没有bg-white-200这个色值，若你用了自定义颜色，需确认tailwind.config.js中已配置该颜色变量。

你也可以用数组拼接的方式实现类名复用，写法更直观：

<button 
  className={['w-32 h-32 rounded-2xl', !checked ? 'bg-white-200' : 'bg-orange'].join(' ')}
  onClick={() => setClicked(!checked)}
>
  {/* 按钮内容 */}
</button>

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