在 React 中，我們可以利用 JavaScript 的條件運算特性，在 JSX 中根據狀態或 props 的不同，渲染不同內容。
常見的條件渲染方法
if/else 條件分支
可在函式組件內先進行條件判斷，再決定返回哪個元素：function Greeting({ isLoggedIn = false }) {
if (isLoggedIn) {
return <h1>歡迎回來！</h1>;
}
return <h1>請先登入。</h1>;
}
三元運算子 (Ternary Operator)
直接在 JSX 內使用，適合簡單的條件判斷：
function Greeting({ isLoggedIn = false }) {
return (
<div>
{isLoggedIn ? <h1>歡迎回來！</h1> : <h1>請先登入。</h1>}
</div>
);
}
邏輯與運算子 (Logical &&)
常用於只在條件為真時顯示某部分 UI，如果條件為假則不渲染任何內容（React 會忽略布林值）：
function Mailbox({ unreadMessages }) {
return (
<div>
<h1>你好！</h1>
// 底下別忘了要用花括號包裹!!!
{
unreadMessages.length > 0 &&
// 底下程式碼以邏輯上來看一直都是條件為真，所以上面的判斷是關鍵
<h2>你有 {unreadMessages.length} 則未讀郵件。</h2>
}
</div>
);
}
複雜條件處理
- 多重條件： 當條件較複雜時，可以在組件內定義變數或使用函式來決定要渲染哪個元素，這樣可以讓 JSX 更加乾淨。
- 條件樣式與屬性： 除了渲染不同的元素，也可以根據條件改變 CSS 類別或屬性，使用條件運算來決定傳入的
className或style。
範例如下：
function Button({ isActive = false }) {
const buttonClass = isActive ? 'btn-active' : 'btn-inactive';
return (
<button className={buttonClass}>
{isActive ? '啟用' : '停用'}
</button>
);
}
