條件渲染

用 && 和 ? : 切換顯示與隱藏

重點

JSX 的 { } 裡不能寫 if，要改用 && 或 ? :
顯示或不顯示二選一，用 &&：{isOpen && 內容}
A 和 B 擇一顯示，用 ? :：{isLoggedIn ? 歡迎 : 請登入}

動手試試

import { useState } from "react"

export default function App() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div style={{ padding: 16 }}>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "關閉" : "開啟"}
      </button>
      {isOpen && <p>只有開啟時才會顯示這裡</p>}
    </div>
  )
}

Open Sandbox

把展開時的文字增加到兩行
只在收合時顯示「已收合」（提示：!isOpen &&）
讓它一開始就是展開的狀態（提示：useState 的初始值）

常見錯誤

把數字當成 && 的條件，畫面會出現「0」

寫 {count && …} 時，count 為 0 就會在畫面上顯示 0。數字要寫成 {count > 0 && …}。

!isOpen 是「isOpen 的相反」

! 會把 true 和 false 互換。setIsOpen(!isOpen) 就是「變成跟現在相反」，是切換展開／收合的標準寫法。