{} vs () 的正確使用時機

在 React 的 JSX 語法中，小括號 () 和 大括號 是兩種最常使用的結構符號，但它們各自肩負著不同的使命。正確理解它們的功能，是您流暢編寫 React 程式碼的關鍵。

---

核心法則：大括號 是 JavaScript 的「傳送門」

在 JSX 的世界裡，所有不是 HTML 標籤或靜態文字的內容，都必須透過大括號 來包裹。

的主要功能：

1. 嵌入 JavaScript 表達式 (Expressions)

是將 JSX 語法切換回標準 JavaScript 模式 的唯一通道。它只接受可以被求值 (evaluated) 並產生單一結果的表達式。

使用情境	範例	說明
渲染變數/資料	<h1>Hello, {props.name}</h1>	嵌入變數或屬性值。
簡單運算	<p>總和：{5 + 10}</p>	嵌入數學運算或三元運算子等。
呼叫函式	<button onClick={() => handleClick()} >點擊</button>	嵌入函式呼叫或定義事件處理器。

匯出到試算表

2. 執行動態渲染邏輯 (Map, Filter, 條件判斷)

當您需要執行複雜的邏輯，例如迴圈渲染列表 (map) 或根據條件決定渲染內容時，這些邏輯必須發生在 內。

JavaScript

// 範例：使用 map 動態渲染列表
function ItemList({ data }) {
  return (
    <ul>
      {/* 👈 開始 JS 區塊，執行 map 邏輯 */}
      {data.map((item) => (
        // 內層的 () 為了簡化箭頭函式的回傳
        <li key={item.id}>{item.name}</li>
      ))}
      {/* 結束 JS 區塊 */}
    </ul>
  );
}

---

小括號 ()：程式碼結構與回傳的「容器」

相較於 負責「執行邏輯」，小括號 () 在 JSX/React 中主要扮演結構化和語法糖的角色。

() 的主要功能：

1. 定義函式的回傳結構

在 React 函式元件 (Functional Component) 中，如果您的 JSX 結構超過一行，通常會用 () 包裹整個回傳內容。這可以避免 JavaScript 自動分號插入 (ASI) 機制導致的錯誤，並提高可讀性。

// 推薦寫法：用 () 包裹多行的 JSX，確保程式碼被視為單一表達式
const MyComponent = (props) => (
  <div className="container">
    <h1>{props.title}</h1>
    <p>這是一個多行結構。</p>
  </div>
);

2. 箭頭函式的隱式回傳

在 map、filter 等高階函式中，當您使用箭頭函式 (=>) 且希望隱式回傳一個多行或單行的 JSX 元素時，您必須使用 () 來包裹這個元素。

• 箭頭函式規則： 箭頭函式可以省略 return 和 ，但如果回傳的是一個物件（JSX 元素在編譯後其實是物件），則必須用 () 包裹。

// 範例：map 隱式回傳 JSX
items.map(
  (
    item // 👈 用 () 包裹 JSX，隱式回傳
  ) => <li key={item.id}>{item.name}</li>
);

// 錯誤範例： map((item) => { <li>...</li> })
// 這裡的 {} 會被視為函式的主體，但主體內沒有 return，所以回傳了 undefined

---

總結比較與快速決策表

下次當您在寫 JSX 遇到疑問時，請透過這個表格來幫助您快速決定：

符號	主要用途	思考點 (決定使用哪種)	範例情境
	邏輯切換與資料嵌入	我現在需要執行 JavaScript 程式碼或引用變數嗎？	動態資料 ({data.name}), map 迴圈 ({array.map(...) }), 條件判斷 ({isReady && <Component />})
()	結構分組與隱式回傳	我要回傳一個多行的 JSX 結構嗎？ 我需要在不寫 return 的情況下回傳 JSX 嗎？	Component 回傳 (return (...)), map 內回傳 JSX ((item) => (...))