React中className三元运算符写法错误，DOM未渲染正确类名

嘿，我一眼就瞅出问题啦——你的代码里运算符优先级搞混了！

你的className表达式里，+运算符的优先级比===高，导致代码会先执行'total' + ' ' + total，把这部分拼成一个字符串，再去和0做比较。

举个例子：如果total是0，那'total' + ' ' + total会得到'total 0'，拿这个字符串和数字0比较结果肯定是false，于是走三元运算符的else分支返回一个空格' '。最终className变成'total ' + ' ' = 'total '——React遇到这种全是空格的类名，就会渲染成空的class属性啦。

最简单的修复方式是给三元运算符的判断部分加括号，让它先判断total === 0，再拼接字符串：

<span key={total} className={'total' + (total === 0 ? ' total--empty' : '')}>
  {total ? total : 0}
</span>

要是想让代码更清爽易读，推荐用ES6模板字符串：

<span key={total} className={`total ${total === 0 ? 'total--empty' : ''}`}>
  {total ? total : 0}
</span>

如果后续类名逻辑变复杂，把它抽成单独变量会更便于维护：

const spanClassName = `total ${total === 0 ? 'total--empty' : ''}`;

<span key={total} className={spanClassName}>
  {total ?? 0} {/* 这里还可以用空值合并运算符简化写法哦 */}
</span>

这样修改后，当total为0时，DOM会渲染<span class="total total--empty">0</span>；当total不为0时，渲染<span class="total">X</span>，完全符合你的预期~

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