今天要來介紹也是在寫 React 的時候非常容易用到的功能，那就是 條件式渲染（Conditional Rendering）。這邊的渲染（Render），就是在 React 解析我們 Component 回傳的 JSX 後，轉換成能顯示在網頁上 UI 所執行的動作，他會是一個一連串的流程，在之後的篇章會有更詳細介紹那個流程。今天的重點是是如何使用 判斷式（像是 if-else 等判斷） 我們 UI 畫面要顯示哪部分的結構。
今天的文章參考官方文件的：

• https://zh-hant.react.dev/learn/conditional-rendering

不熟悉 JavaScript 判斷式的也可以參考 MDN 上的文章：

• https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/if...else
• https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_operator

條件性地回傳 JSX

之前就有介紹 React Component 就像是 JavaScript function 一樣，只不過是回傳 JSX 格式。所以我們也可以像是 if-else 或是條件運算子（? :）等來使用參數的結果決定不同的回傳。
比較簡單的例子會像是：

function PlayerInfo({ name, isActive }) {
  if (!isActive) {
    return (
      <div>
        <h1>{name} ❎</h1>
      </div>
    )
  }
  
  return (
    <div>
      <h1>{name}</h1>
    </div>
  )
}

這段程式碼就代表當 isActive 這個 prop 如果是 true 的時候正常顯示 name，但如果是 false 的話會多顯示一個 ❎。

而除了 tag 裡的內容，我們也可以使用條件式來使用不一樣的 tag：

function PlayerInfo({ name, isActive }) {
  if (!isActive) {
    return (
      <div>
        <del>{name}</del>
      </div>
    )
  }
  
  return (
    <div>
      <p>{name}</p>
    </div>
  )
}

不過有時候這樣寫會讓整個 Component 變很大一包，或是要寫重複的程式碼。這時候就會使用到 條件運算子，就能把剛剛寫的範例程式碼寫成：

function PlayerInfo({ name, isActive }) {  
  return (
    <div>
      {isActive ? <p>{name}</p> : <del>{name}</del>}
    </div>
  )
}

這樣就能幫我們省很多行程式碼。條件運算子的使用方法就是，如果符合 ? 左邊的條件的話，就回傳 ? 右邊的結果，如果不符合的話則是回傳 : 右邊的結果。這個方法也可以巢狀的一直下去，但通常這樣會讓程式碼的可讀性降低所以會比較少使用。
條件運算子也能使用在平常的變數宣告，然後之後再在大括號裡使用：

function PlayerInfo({ name, isActive }) {
  const displayText = isActive ? `${name} 現役球員` : `${name} 退役球員`
  
  return (
    <div>
      <p>{displayText}</p>
    </div>
  )
}

Component 回傳 null 與邏輯 AND 運算子 (&&)

在使用條件式 rendering 的時候，還有一個很常用的就是會根據條件回傳 null，這樣代表 Component 不會回傳任何內容，當然在網站上也不會顯示任何東西。也可以搭配條件式運算子使用：

function PlayerInfo({ name, isActive }) {
  return (
    <div>
      <p>{isActive ? name : null}</p>
    </div>
  )
}

上面的程式碼也可以用另外一個運算子 && 來代替，使用方法可以參考 MDN：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND

可以把剛剛的範例寫成：

function PlayerInfo({ name, isActive }) {
  return (
    <div>
      <p>{isActive && name}</p>
    </div>
  )
}

不過要注意如果 && 左邊會把 0 判定為實際數值 0，而不是當成 false 的 0，所以當寫成像是 {name && <p>{name}</p>} 而 name 是數字 0 的時候，還是會 render <p>0</p> 在網站上。

我自己在寫的時候是幾乎都使用 ? : null，一個原因是預防剛剛的問題，另一個是如果以後想把不符合的條件下改成顯示其他內容的話，可以直接把 null 去掉加入新的，而不用把 && 重寫。

Switch 應用

除了上述寫法之外，當遇到需要判斷多個條件的時候，在想要避免寫大量的 if-else 判斷式的時候，也可以使用 switch 來判斷要回傳的內容：

function PlayerInfo({ name, position }) {
  switch (position) {
    case 'P':
      return <Pitcher />
    case 'C':
      return <Catcher />
    default:
      return <Fielder />
  }
}

小結

關於條件式 rendering 的介紹先告一個段落，這真的是非常容易使用到的東西，在之後的範例應該也會滿常看到的，有機會也會再做延伸。其實寫法就跟 JavaScript function 真的幾乎完全一樣，這也是我覺得 React 的優點之一，基本上就是在寫 JavaScript，不用再多學語法，大家可以再多試試玩玩看。
最後一樣感謝大家耐心地看完今天的文章，如果有任何問題與建議也歡迎告訴我，明天的文章見了，晚安。