使用 JSX 文件中的逻辑

已完成

JSX 是 HTML 和 JavaScript 的组合。 如果需要逻辑，比如确定如何或是否显示某个内容，请使用 JavaScript。 可以使用 if...else 语句、case 语句或任何其他布尔逻辑。

三元运算符

将布尔逻辑注入应用程序的最常用方法之一是三元运算符。 三元运算符是在单个代码行中创建 if...else 语句的简便方法。 三元语法有三个组件：布尔表达式、表达式为 true 时的返回值以及表达式为 false 时的返回值。

例如，如果想要在数字为偶数或奇数时显示消息，则可以编写以下内容：

const number = 3;
console.log(number % 2 ? 'The number is odd' : 'The number is even');

以布尔值 (number % 2) 为开头编写表达式。 如果数字为奇数，则布尔值（余数）为 1 或 true；将返回第一个值（The number is odd）。 如果数字为偶数，则余数为 0，因此布尔值为 false；将返回第二个值（The number is even）。 前面的代码会生成消息 The number is odd。

三元和 JSX

可以利用此语法来确定应如何显示值。 如果要基于某个值动态设置 HTML 元素的 class，则可以使用以下内容：

<div className={ isComplete ? 'done' : 'normal' }>{ value }</div>

备注

你可能会注意到使用的属性是 className 而不是 class。 这是因为在 JavaScript 中保留了字词 class。 若要避免混淆运行时，请改用 className。