[新手向] 在 React JSX 中撰寫迴圈的三種方式
在 React 的 JSX 中直接使用傳統的 for 迴圈會導致語法錯誤，因為 JSX 本質上是將標記轉換成函式呼叫。以下列出一般常用的三種方式：先在渲染前組裝陣列、使用陣列的 map()、以及利用 ES6 陣列工具（如 Array.from、展開運算符等）產生陣列後再 map()。這些方式都能生成多個元件，適合不同的使用情境。
方法一：使用 for 迴圈
說明與使用情境：
可以先在 render 函式或組件外部使用傳統 for 迴圈建立一個元件陣列，然後將該陣列插入到 JSX 中。這種方式彈性高，適合根據計數或條件逐一產生元件的情境。請注意，每個元素都要設置唯一的 key 屬性以符合 React 列表的需求。
範例（TypeScript）：
優點：
-
清楚簡單，使用熟悉的
for迴圈邏輯，直觀易懂。 -
允許在每次迴圈中使用複雜邏輯或條件，適合需要逐一累加元素的情況。
缺點：
-
程式碼較冗長，缺乏宣告式 (declarative) 的美感。
-
對於有資料陣列的情況較不直觀，需手動管理元素索引。
方法二：使用陣列的 map()
說明與使用情境：
如果已有一個包含資料的陣列，可以直接在 JSX 中對該陣列使用 map() 方法，將每個資料項目映射成一個元件。這是最常見做法，偏 functional programming 風格，程式碼簡潔。一般用於從伺服器或 state/props 傳來的資料陣列渲染列表時，非常方便。
範例（TypeScript）：
優點：
-
簡潔明瞭，一行
map()就可處理整個陣列，程式更具宣告式。 -
避免手動建立額外陣列，直接回傳新陣列。
缺點：
-
對初學者來說，箭頭函式或回呼函式語法可能稍微陌生。
-
如果資料原本不是陣列 (例如只有數字 N)，就必須先生成一個陣列才能使用此法。
方法三：使用 from、spread operator 或 fill + map()
說明與使用情境：
當你只知道要重複產生元件的次數，但沒有現成資料陣列時，可以先用 ES6 的陣列工具來生成一個指定長度的暫時陣列，再用 map() 建立元件。常見做法包括：Array.from({ length: count })、ES6 展開運算符 ...[Array(count)]、或先用 Array(count).fill(...)。這些方式都能產生一個長度為 count 的陣列供 map() 使用，適合需要重複渲染固定數量元件時。
範例（TypeScript）：
另一種寫法（spread operator）：
優點：
-
透過一行程式碼即可產生指定次數的元素，程式碼簡短。
-
不需要額外變數，直接在 JSX 中完成。
-
適用於只需重複多個空元素或占位元件的情況。
缺點：
-
語法較為「黑魔法」，對初學者不直覺，需要了解 ES6 陣列技巧。
-
某些方法 (如展開運算符) 需要瀏覽器或 Babel 支援；使用
Array.from或fill可能需要 polyfill。
總而言之，一般常見的做法是：若有明確的資料陣列，就使用 map()；若需重複固定次數，則可先生成一個長度陣列再用 map()；若需要更細緻的流程控制，則使用傳統的 for 迴圈 先累加元素陣列，再回傳 JSX。
留言
張貼留言