[官網學 React] Docs：條件 Render

網址（英文）：https://reactjs.org/docs/conditional-rendering.html
網址（中文）：https://zh-hant.reactjs.org/docs/conditional-rendering.html

在 React 可以建立許多獨立且包含各自特定功能的組件，然後你根據應用程式的 state 決定要渲染出來的組件。

React 的條件渲染使用 JavaScript 的運算子，例如 if 或者 三元運算子：

若覺得用 if / else 的寫法很冗長，可換用花刮 {} 將 JavaScript 的邏輯操作包在裡面：

Inline If with Logical && Operator

JavaScript 的 && 邏輯：

• true && 表達式：回傳後方表達式
• false && 表達式：回傳前方 false

＊當回傳前方的 false 是一個表達式，就會被回傳。如下面範例中，render 將會回傳 <div>0</div>：

還有一種行內表達的方式是使用 JavaScript 的condition ? true : false ：

Inline If-Else with Conditional Operator

官網提醒，如果條件變得過於複雜，也許是個需要抽取出元件的時機來了。

Element 變數

可使用變數儲存 HTML 元素，讓我們能依據條件渲染部分元件，而其他輸出不變：

使用變數 button

防止 Component 渲染

可透過回傳 null 隱藏元件：

＊在 component 中回傳 null 並不會影響 component 的生命週期方法。例如 componentDidUpdate 依然可以被呼叫。