使用 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。 這是因為 class 在 JavaScript 中是保留的字組。 為了避免混淆執行階段，所以改用 className。