React 条件渲染 – BuildCodePro

React条件渲染知识汇总

编程小白也能理解的React条件渲染全解析，包含多种实现方式、最佳实践和常见问题

1 什么是条件渲染？

条件渲染就是根据不同的条件显示不同的内容。就像日常生活中的选择：

如果下雨，就带伞 ☔
如果天晴，就戴墨镜 😎

在React中，我们根据组件的状态(state)或属性(props)来决定显示哪些内容。

// 简单示例：根据isLoggedIn状态显示不同内容
function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>欢迎回来!</h1>;
  }
  return <h1>请先登录。</h1>;
}

2 使用if语句

这是最直接的方法，就像写普通JavaScript一样。

适用于逻辑较复杂的情况，或者在return之前就决定好渲染内容。

function UserStatus({ user }) {
  if (user) {
    return (
      <div>
        <p>欢迎, {user.name}!</p>
        <button>退出登录</button>
      </div>
    );
  } else {
    return (
      <div>
        <p>请登录或注册</p>
        <button>登录</button>
      </div>
    );
  }
}

注意事项：在组件中使用if语句时，每个分支都需要返回有效的JSX内容

3 三元运算符 ? :

简洁的”条件 ? 结果1 : 结果2″语法，适合简单条件判断。

类似于：如果下雨？带伞 : 带墨镜

function WelcomeMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>欢迎回来！</h1>
      ) : (
        <h1>请先登录。</h1>
      )}
    </div>
  );
}

// 三元表达式也可以用于赋值
function Notification({ messageCount }) {
  const text = messageCount > 0 
    ? `您有${messageCount}条新消息` 
    : '没有新消息';
    
  return <div>{text}</div>;
}

4 逻辑与运算符 &&

用于只需显示一种情况的条件渲染。

当条件为true时，显示后面的内容；为false时，什么都不显示。

function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>收件箱</h1>
      {unreadMessages.length > 0 && (
        <h2>
          您有 {unreadMessages.length} 封未读邮件
        </h2>
      )}
    </div>
  );
}

重要提示：确保&&前面的表达式是布尔值，否则可能会渲染0或其他假值

5 多种状态的处理

当有多种可能状态时（如加载中、成功、错误），可以使用多种方法：

// 方法1：多个if语句
function DataState({ status }) {
  if (status === 'loading') {
    return <LoadingSpinner />;
  }
  
  if (status === 'error') {
    return <ErrorMessage />;
  }
  
  return <DataContent />;
}

// 方法2：switch语句
function DataState({ status }) {
  switch (status) {
    case 'loading':
      return <LoadingSpinner />;
    case 'error':
      return <ErrorMessage />;
    default:
      return <DataContent />;
  }
}

6 列表的条件渲染

结合数组方法(map, filter)和条件渲染展示动态列表

function TodoList({ todos }) {
  return (
    <ul>
      {todos.length > 0 ? (
        todos.map(todo => (
          <TodoItem key={todo.id} todo={todo} />
        ))
      ) : (
        <li>暂无待办事项</li>
      )}
    </ul>
  );
}

// 更简洁的写法
function TodoList({ todos }) {
  return (
    <ul>
      {todos.length 
        ? todos.map(todo => <TodoItem key={todo.id} todo={todo} />)
        : <li>暂无待办事项</li>
      }
    </ul>
  );
}

7 阻止组件渲染

在某些情况下，你可能希望完全隐藏组件而不仅仅是内容

// 返回null可以阻止组件渲染
function WarningBanner({ warn }) {
  if (!warn) {
    return null; // 不渲染任何东西
  }

  return (
    <div className="warning">
      警告：请检查您的操作！
    </div>
  );
}

注意：返回null不会影响生命周期方法的执行，组件依然会被创建和销毁

8 最佳实践与技巧

总结一些实用的技巧和常见问题：

避免复杂嵌套：如果三元运算符嵌套超过两层，考虑拆分组件
提取变量：复杂的条件可以先提取到变量中
组件提取：将条件分支提取为独立组件
默认值：为可能为undefined的值提供默认值
与运算符(&&)陷阱：注意0、””等falsy值可能被渲染的问题

// 提取条件逻辑示例
function Page({ user }) {
  const content = user 
    ? <UserDashboard user={user} />
    : <LoginPage />;
    
  return (
    <div className="container">
      <Header />
      {content}
      <Footer />
    </div>
  );
}