Chickenrice's Workshop

在 React 中，條件渲染（Conditional Rendering）是根據狀態或條件來決定是否顯示某些 UI 元素的核心技術。對於新手而言，這個概念看似簡單，但實作時常會遇到一些陷阱。本文將介紹常見的錯誤類型，並提供最佳實踐建議，幫助你寫出更穩定、可讀性更高的程式碼。 常見錯誤一：錯誤地比較字串與布林值 問題描述 當從 sessionStorage 或 localStorage 中取得布林值時，這些值實際上是字串類型（例如 'true' 或 'false' ）。若直接將其與布林值比較，會導致條件判斷錯誤。 錯誤範例 即使回傳的是 'false' ， Boolean('false') 還是會是 true ，因為非空字串在 JavaScript 中是 truthy。 正確寫法 常見錯誤二：在自訂元件中提前評估 children 問題描述 React 會在渲染父元件時先評估 children ，這會導致即使條件為 false ，仍有程式碼被執行，造成錯誤。 錯誤範例 正確寫法 常見錯誤三：條件渲染語法錯誤 錯誤範例 正確寫法 常見錯誤四：錯誤地使用數字當作布林值渲染 問題描述 React JSX 中 0 不會被當成布林值忽略，而是會直接渲染成字元 0 。 錯誤範例 正確寫法 最佳實踐建議 守衛條件（Guard Clause） ：避免巢狀邏輯 將條件放在 map 外層 ： 多重條件使用 switch ： 總結 條件渲染是 React 開發中不可或缺的一部分，掌握正確的使用方式能避免許多常見錯誤。以下是本文的重點整理： ✅ 明確比較值的類型 ：避免將字串與布林值直接比較。 ✅ 避免提前評估 children ：使用 Render Props 控制渲染時機。 ✅ 遵守 JSX 語法規則 ：條件渲染的表達式要包在合法結構中。 ✅ 數字不是布林值 ： 0 在 JSX 中會被渲染出來，要特別處理。 ✅ 使用守衛條件與清晰結構 ：讓程式碼更穩定、可維護。 希望這篇文章能幫助你在 React 的條...

在 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 展開運算符 ...[Ar...