[新手向] React 常見的 Conditional Rendering 錯誤
在 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 的條件渲染上更加得心應手 🎯
留言
張貼留言