30天用React打造AI工具箱 Day8

React的條件渲染：決定顯示什麼

在真實的應用程式裡，我們常常需要根據情況來決定要不要顯示某個內容。例如：

• 使用者還沒登入 → 顯示登入按鈕
• 使用者已登入 → 顯示個人資料
• 資料還在載入 → 顯示Loading文字

if/else

在元件裡可以直接用if/else決定回傳的JSX。

export default function LoginStatus({ loggedIn }){
  if(loggedIn){
    return <p>歡迎回來！</p>
  } else {
    return <p>請先登入</p>
  }
}

三元運算子

如果要在同一段JSX裡切換，三元運算子 (條件 ? A : B) 很方便。

export default function UserInfo({ loggedIn }){
  return (
    <div className="p-4">
      {loggedIn ? <p>使用者已登入</p> : <p>尚未登入</p>}
    </div>
  )
}

&& 運算子

如果只需要在特定條件成立時顯示某個區塊，可以用 &&。

export default function Notice({ hasError }){
  return (
    <div>
      <p>主要內容</p>
      {hasError && <p className="text-red-600">發生錯誤，請再試一次</p>}
    </div>
  )
}

) 範例：登入流程

import { useState } from 'react'

export default function LoginDemo(){
  const [loggedIn,setLoggedIn] = useState(false)

  return (
    <div className="p-6 space-y-3">
      {loggedIn ? (
        <div>
          <p className="mb-3">嗨，你已經登入了！</p>
          <button
            className="px-4 py-2 rounded bg-red-600 text-white"
            onClick={()=>setLoggedIn(false)}
          >
            登出
          </button>
        </div>
      ) : (
        <div>
          <p className="mb-3">請先登入</p>
          <button
            className="px-4 py-2 rounded bg-blue-600 text-white"
            onClick={()=>setLoggedIn(true)}
          >
            登入
          </button>
        </div>
      )}
    </div>
  )
}