Question

因此，我有一个简单的标记span，classNames会触发特殊条件，但出于某种原因，class中的DOM不会出现。我没有像class这样的<span class>...</span>字。{/ p>

我的范围标记：

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

Answer 1

它被解析为三元*：word.Find find = rng.Find; find.Wrap = word.WdFindWrap.wdFindContinue; //find.Execute(findtext); find.Replacement.Highlight = 1; Globals.ThisAddin.Application.Options.DefaultHighlightColorIndex = Word.WdColorIndex.wdRed; find.Execute(FindText:wd,Replace: Word.WdReplace.wdReplaceAll,MatchWholeWord: true,MatchCase: true);

(statement) ? whenTrue : whenFalse;

一个字符串是真实的，因此'总 - 空'。你需要什么：

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

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

Answer 2

你应该知道Operator precedence的概念。

在您的情况下，您正在使用＆＃39; +＆＃39;运算符（优先级为13）和比较＆＃39; ===＆＃39;运算符（优先级为10）。

因此，表达式：

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

...将始终返回假值，即空格。

让我们说总值是0，所以你的表达式执行为'total'+' '+0，它变成一个字符串＆＃34;总计0＆＃34;不等于0。

您需要做的是使用＆＃39;（）＆＃39;分组表达式圆括号（优先级为20）。即

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

有可能的真实/虚假结果，即＆＃34;总计＆＃34;或＆＃34;总计 - 空＆＃34;

Answer 3

您可以在下面尝试此操作。我们可以在花括号和括号的帮助下制作它。

Curly braces {}是JSX中的特殊语法。它用于在编译期间评估JavaScript表达式。 JavaScript表达式可以是变量，函数，对象或任何解析为值的代码。

括号（）可用于返回某些内容。 Curly braces versus parenthesis in ReactJS

<span className={"total "+(total !== 0 ? "total_empty": null )} />
{total ? total : 0}
</span>

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

3 个答案: