React入门学习——指北指南（第五节）
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>  \<