JSX 中的條件渲染與清單渲染：實用範例教學

更新日期： 2025 年 3 月 30 日

在使用 React 開發應用時，JSX（JavaScript XML） 是我們撰寫 UI 結構的主要語法。

它看起來像 HTML，實際上卻是 JavaScript 的語法糖，讓我們能夠以更直覺的方式操作畫面顯示內容。

本篇教學將帶你認識 JSX 中兩個常見且實用的功能：條件渲染 與 清單渲染。透過實際範例，我們會說明如何使用：

• ? : 三元運算子
• && 邏輯與運算子
• .map() 搭配 key 渲染清單

無論你是初學者還是正在複習 React 基礎的開發者，都能透過這篇文章掌握 JSX 中這些重要的渲染技巧！

條件渲染（Conditional Rendering）

在開發 React 應用的過程中，我們常常需要根據不同的條件來決定畫面要呈現什麼內容。

例如：使用者是否已登入、資料是否載入完成、某個選單是否展開等，這些狀況都屬於「條件渲染」。

JSX 是 JavaScript 的延伸語法，因此我們可以直接在 JSX 中使用 JavaScript 的條件運算來控制顯示邏輯。

以下介紹兩種最常見的條件渲染方式：

使用 ? : 三元運算子

三元運算子（Ternary Operator）是一種精簡的 if...else 寫法，用來根據條件回傳不同的結果，語法如下：

條件 ? 條件為真時的結果 : 條件為假時的結果

✅ 實作範例：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>歡迎回來！</p> : <p>請先登入</p>}
    </div>
  );
}

📘 說明：

這個元件會根據 isLoggedIn 這個布林值來決定要顯示哪段文字：

• 如果 isLoggedIn 為 true，就顯示 <p>歡迎回來！</p>。
• 如果 isLoggedIn 為 false，則顯示 <p>請先登入</p>。

🎯 使用時機：

• 需要根據條件「切換」兩種（或更多）顯示內容。
• 常見於登入狀態、按鈕切換、顯示不同訊息等。

🛠 小技巧：

三元運算子可以巢狀使用（但可讀性會下降），例如：

{role === 'admin' ? '管理員' : role === 'user' ? '一般用戶' : '訪客'}

如需處理較複雜邏輯，建議將條件運算拉出 JSX 外先處理好，讓畫面邏輯更清晰。

使用 && 邏輯與運算子

當我們只需要在條件成立時「顯示某個元素」，而條件不成立時什麼都不顯示，這時使用 && 是最簡潔的選擇。

✅ 實作範例：

function Notification({ hasNewMessage }) {
  return (
    <div>
      {hasNewMessage && <p>你有新訊息！</p>}
    </div>
  );
}

📘 說明：

• 如果 hasNewMessage 為 true，整個 <p> 元素會被渲染到畫面上。
• 如果為 false，JSX 會渲染 false，但 React 會忽略它，也就是不顯示任何東西。

🎯 使用時機：

• 條件為真時才需要顯示某個元素，條件為假則「什麼都不用做」。
• 常用於通知訊息、警告提示、次要資訊的顯示。

🛠 小提醒：

&& 的左側如果是 0 或其他 falsy 值（如 null, undefined），也會被視為不渲染，可能會有誤判的情況。

建議搭配布林值使用，或使用顯式轉換：

{Boolean(count) && <p>你點了 {count} 次</p>}

清單渲染（List Rendering）

在開發 React 應用時，我們經常會需要將一組資料渲染成多個元素，例如：

• 顯示一組使用者名單
• 建立多個卡片元件顯示商品清單
• 呈現留言板中的每則留言

這些需求都可以透過 JavaScript 中的 .map() 方法結合 JSX 來實現，這種做法稱為 清單渲染（List Rendering）。

使用 .map() 渲染陣列

.map() 是 JavaScript 中用來「逐一處理陣列中每個元素，並產生一個新陣列」的方法。

React 中，我們通常用它來將每個資料項目轉換成一個 JSX 元素，進而顯示在畫面上。

✅ 基本語法：

array.map((item, index) => {
  return <JSX 元素 />
});

📘 簡單範例：

const fruits = ['蘋果', '香蕉', '芒果'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

🧠 說明：

• .map() 將 fruits 陣列中的每一個水果名稱，依序轉換為一個 <li> 元素。
• 每個 <li> 都需要一個 key 屬性（後面會詳細說明為什麼）。
• 最終畫面會呈現：

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>芒果</li>
</ul>

key 的重要性與使用方式

React 在處理多個元素時，需要一個 穩定的識別碼（key） 來幫助追蹤哪些項目被新增、刪除或修改。

這樣做的目的是為了提升效率、減少不必要的 DOM 操作。

❗ 錯誤範例（不建議）：

{fruits.map((fruit) => (
  <li>{fruit}</li>
))}

這樣的寫法會觸發警告：Each child in a list should have a unique “key” prop.

✅ 正確範例（使用 index 作為 key）：

{fruits.map((fruit, index) => (
  <li key={index}>{fruit}</li>
))}

雖然這樣能消除警告，但 index 並不是最佳選擇，尤其在清單可能被「重新排序、刪除或插入」時，index 會改變，導致 React 誤判。

✅ 更好做法（使用資料中唯一值）：

const fruits = [
  { id: 101, name: '蘋果' },
  { id: 102, name: '香蕉' },
  { id: 103, name: '芒果' }
];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

說明：
這裡使用 fruit.id 當作 key，是更穩定也更安全的選擇。

清單渲染搭配元件

你也可以將每一項資料交給「子元件」渲染，讓程式更有模組化的結構。

✅ 範例：

function FruitItem({ name }) {
  return <li>{name}</li>;
}

function FruitList() {
  const fruits = ['蘋果', '香蕉', '芒果'];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <FruitItem key={index} name={fruit} />
      ))}
    </ul>
  );
}

這樣的寫法在清單變大時能讓邏輯更清楚，也方便元件重用。

額外進階技巧：條件與清單渲染結合

你可以將條件渲染與清單渲染結合使用：

function FruitList({ fruits }) {
  return (
    <ul>
      {fruits.length > 0 ? (
        fruits.map((fruit) => <li key={fruit.id}>{fruit.name}</li>)
      ) : (
        <p>目前沒有水果</p>
      )}
    </ul>
  );
}

如果清單是空的，就顯示「目前沒有水果」的訊息；否則顯示水果清單。

小結：清單渲染小技巧與建議

結論：何時用哪種方法？

在撰寫 React 元件時，常常會遇到「根據條件控制顯示內容」或「根據資料渲染多個項目」的情境。

JSX 提供了幾種語法可以達成這些需求，而選擇正確的語法不只能讓程式碼更簡潔，也能讓畫面邏輯更加清晰。

以下是三種常見語法的使用時機與對應範例：

需要根據條件顯示兩種內容 → 使用 ? : 三元運算子

適用情境：

• 想根據一個布林條件，選擇「兩種互斥」的顯示內容。
• 例如：使用者是否登入？訂單是否成立？狀態是否為成功？

語法範例：

{isLoggedIn ? <p>歡迎回來！</p> : <p>請先登入</p>}

好處：

• 可清楚表示兩種情況對應的畫面。
• 適合需要顯示「這個或那個」的邏輯。

條件為真才顯示一段內容 → 使用 && 邏輯與運算子

適用情境：

• 只需要在某個條件為真時顯示某段內容，為假時不顯示任何東西。
• 例如：有新通知、有錯誤訊息、有結果才顯示。

語法範例：

{hasNewMessage && <p>你有新訊息！</p>}

好處：

• 語法簡潔，適合單一條件。
• 沒有 else 狀況時特別實用。

注意：

• 若左側表達式的值為 0、''、null 等 falsy 值，也會被視為條件不成立。
• 可使用 Boolean(x) 或雙重否定 !!x 做轉型處理。

渲染重複性資料清單 → 使用 .map() 搭配 key

適用情境：

• 有一筆資料陣列，需要將每一筆轉成畫面上的元素，例如清單、表格、卡片等。
• 例如：留言列表、商品項目、文章標題、選項按鈕等。

語法範例：

const todos = [
  { id: 1, text: '寫作業' },
  { id: 2, text: '吃晚餐' },
];

<ul>
  {todos.map((todo) => (
    <li key={todo.id}>{todo.text}</li>
  ))}
</ul>

好處：

• 動態顯示任意長度的清單資料。
• key 可幫助 React 有效追蹤 DOM 元素的變動，提高效能並避免重繪錯誤。

最佳實踐：

• key 建議使用資料中真正唯一的識別碼（如資料庫 id），而不是陣列的 index。

小提醒：語法選擇對照表

透過這些語法靈活組合，你可以輕鬆應對大部分的顯示邏輯需求。建議多加練習、嘗試不同的 UI 狀況，你將會更熟悉這些 JSX 渲染技巧的實戰應用！