條件渲染
您的元件經常需要根據不同的條件顯示不同的內容。在 React 中，您可以使用 JavaScript 語法（例如if陳述式、&& 和 ? :運算子）來條件式地渲染 JSX。
您將學習
- 如何根據條件返回不同的 JSX
- 如何條件式地包含或排除一段 JSX
- 您在 React 程式碼庫中會遇到的常見條件語法捷徑
條件式返回 JSX
假設您有一個 PackingList元件，它渲染了幾個Item，這些項目可以被標記為已打包或未打包：
請注意，有些 Item 元件的 isPacked屬性被設定為true 而不是 false。如果 isPacked={true}，您希望在已打包的項目旁加上勾選標記 (✅)。
您可以將其寫成一個if/else 陳述式，如下所示：
如果 isPacked屬性為true，此程式碼會返回一個不同的 JSX 樹狀結構。經過此更改後，部分項目末尾會出現勾選標記：
試著編輯任一種情況下返回的內容，看看結果如何變化！
請注意，您正在使用 JavaScript 的if 和 return語句來建立分支邏輯。在 React 中，控制流程（例如條件判斷）是由 JavaScript 處理的。
使用 null 有條件地不返回任何內容
在某些情況下，您可能完全不想渲染任何內容。例如，假設您根本不想顯示已打包的物品。元件必須返回某些內容。在這種情況下，您可以返回null：
如果isPacked為真，元件將不返回任何內容，即null。否則，它將返回要渲染的 JSX。
實際上，從元件返回null並不常見，因為這可能會讓嘗試渲染它的開發人員感到意外。更常見的做法是，您會在父元件的 JSX 中有條件地包含或排除該元件。以下是具體做法！
有條件地包含 JSX
在前面的例子中，您控制了元件將返回哪個（如果有的話！）JSX 樹。您可能已經注意到渲染輸出中存在一些重複：
與以下內容非常相似
這兩個條件分支都返回 <li className="item">...</li>：
雖然這種重複沒有害處，但可能會讓你的程式碼更難維護。如果你想更改 className怎麼辦？你必須在程式碼的兩個地方進行修改！在這種情況下，你可以有條件地包含一點 JSX，讓你的程式碼更加DRY（不要重複自己）。
條件（三元）運算子 (? :)
JavaScript 有一種緊湊的語法來編寫條件表達式——條件運算子或「三元運算子」。
與其這樣寫：
你可以這樣寫：
你可以將其讀作「如果isPacked為真，則 (?) 渲染name + ' ✅'，否則 (:) 渲染name」。
現在假設你想將已完成項目的文字包裝到另一個 HTML 標籤中，例如<del>以將其劃掉。你可以添加更多換行和括號，以便更容易在每種情況下嵌套更多 JSX：
這種風格適用於簡單的條件，但要適度使用。如果你的元件因為嵌套了太多條件標記而變得混亂，請考慮提取子元件來清理。在 React 中，標記是你程式碼的一部分，因此你可以使用變數和函數等工具來整理複雜的表達式。
邏輯 AND 運算子 (&&)
另一個你會遇到的常見捷徑是 JavaScript 邏輯 AND (&&) 運算子。在 React 元件內部，當你希望在條件為真時渲染一些 JSX，否則不渲染任何內容時，它經常出現。使用&&，你可以僅在 isPacked 為 true時有條件地渲染勾選標記：
你可以將其讀作「如果isPacked，則 (&&) 渲染勾選標記，否則，不渲染任何內容」。
以下是實際運作情況：
一個JavaScript && 表達式會在左側（我們的條件）為 true時返回右側的值（在我們的例子中是勾選標記）。但如果條件為false，整個表達式就變成 false。React 將false視為 JSX 樹中的一個「空洞」，就像null 或 undefined一樣，並且不會在其位置渲染任何內容。
陷阱
不要在 &&的左側放置數字。
為了測試條件，JavaScript 會自動將左側轉換為布林值。然而，如果左側是0，那麼整個表達式就會得到該值 (0)，而 React 會樂於渲染0而不是什麼都不渲染。
例如，一個常見的錯誤是編寫像 messageCount && <p>New messages</p> 這樣的程式碼。很容易假設當 messageCount 為 0時它不會渲染任何內容，但它實際上渲染的是0本身！
要修復它，請將左側設為布林值：messageCount > 0 && <p>New messages</p>。
有條件地將 JSX 賦值給變數
當捷徑妨礙編寫清晰的程式碼時，請嘗試使用 if 陳述式和變數。你可以重新賦值使用 let定義的變數，所以先提供你想要顯示的預設內容，即名稱：
使用 if 陳述式，在 isPacked 為 true時，將一個 JSX 表達式重新賦值給itemContent：
大括號開啟了「通往 JavaScript 世界的窗口」。 在大括號中嵌入變數，將先前計算的表達式嵌套在返回的 JSX 樹中：
這種風格最為冗長，但也最為靈活。以下是實際運作範例：
與之前一樣，這不僅適用於文字，也適用於任意的 JSX：
如果您不熟悉 JavaScript，一開始可能會覺得這些多樣化的風格令人不知所措。然而，學習它們將幫助您閱讀和編寫任何 JavaScript 程式碼——而不僅僅是 React 元件！首先選擇您偏好的風格，然後如果您忘記其他風格如何運作，可以再次查閱此參考資料。
回顧
- 在 React 中，您使用 JavaScript 來控制分支邏輯。
- 您可以使用
if陳述式有條件地返回一個 JSX 表達式。 - 您可以有條件地將一些 JSX 儲存到變數中，然後透過使用大括號將其包含在其他 JSX 中。
- 在 JSX 中，
{cond ? <A /> : <B />}表示 「如果cond為真，則渲染<A />，否則渲染<B />」。 - 在 JSX 中，
{cond && <A />}表示 「如果cond為真，則渲染<A />，否則不渲染任何內容」。 - 這些快捷方式很常見，但如果您偏好使用單純的
if，則不必使用它們。