反应.我在className中的ternar运算符有什么问题？

Question

所以,我在一个特殊条件下有一个span带有classNames触发器的简单标签,但由于某些原因我class的内容DOM没有出现.我class没有任何相似之处<span class>...</span>.

我的标签:

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

Answer 1

它被解析为三元*: (statement) ? whenTrue : whenFalse;

// Which, translated to your code makes:
{ ('total' + ' ' + total === 0) ? 'total--empty' : ' '}

一个字符串是真的,因此'总 - 空'.你需要什么:

{ 'total' + ' ' + (total === 0 ? 'total--empty' : ' ')}

*大多数人称之为三元运算符,但它实际上称为条件运算符.它是一个三元运算符(一个接受三个操作数的运算符),目前是JavaScript唯一的三元运算符,但这可能会改变.