React 交互性：過濾與條件渲染
在前文我們學習了 React 中事件處理和狀態管理的基礎。本節將聚焦兩個重要的進階技巧 ——條件渲染（根據狀態動態顯示不同 UI）和列表過濾（根據條件篩選數據），這兩者是構建交互式應用的核心能力，能讓界面根據用戶操作呈現更智能的響應。
條件渲染：根據狀態動態顯示 UI
條件渲染指的是根據組件的狀態（或 props）決定是否渲染某個元素，或渲染不同的元素。這就像現實中的 “根據天氣決定穿什么衣服”—— 狀態不同，結果不同。
條件渲染的常用方法
React 中實現條件渲染的方式靈活多樣，可根據場景選擇最合適的方法。
1. if/else 語句（適合復雜條件）
在組件的渲染邏輯中使用if/else，根據條件返回不同的 JSX。
import { useState } from 'react';function UserGreeting() {  return \<h1>歡迎回來！\</h1>;}function GuestGreeting() {  return \<h1>請先登錄。\</h1>;}function Greeting() {  // 根據isLoggedIn狀態決定渲染哪個組件  const \[isLoggedIn, setIsLoggedIn] = useState(false);  let greeting;  if (isLoggedIn) {  greeting = \<UserGreeting />;  } else {  greeting = \<GuestGreeting />;  }  return (  \<div>  {greeting}  \<button onClick={() => setIsLoggedIn(!isLoggedIn)}>  {isLoggedIn ? '退出' : '登錄'}  \</button>  \</div>  );}
2. 邏輯與運算符（&&，適合簡單顯示 / 隱藏）
當需要 “滿足條件時渲染某個元素，不滿足時不渲染”，可使用&&運算符 —— 左側條件為true時，渲染右側元素；否則不渲染。
import { useState } from 'react';function Notification() {  const \[hasUnread, setHasUnread] = useState(true);  return (  \<div>  \<h1>消息中心\</h1>  {/\* 有未讀消息時顯示提示 \*/}  {hasUnread && \<p>您有3條未讀消息！\</p>}  \<button onClick={() => setHasUnread(false)}>標記為已讀\</button>  \<
)
