javascript - react 。 className 中的三元运算符有什么问题？

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) ?当真:当假；

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

字符串是真实的，因此是“total--empty”。您需要什么:

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

<小时/>

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