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>