在 React 開(kāi)發(fā)中，我們經(jīng)常需要根據(jù)不同條件顯示不同內(nèi)容 —— 比如用戶登錄后顯示個(gè)人中心，未登錄時(shí)顯示登錄按鈕；數(shù)據(jù)加載中顯示 loading 狀態(tài)，加載完成后顯示內(nèi)容。這種 "根據(jù)條件決定渲染什么" 的操作，就是條件渲染。

本文將帶你系統(tǒng)學(xué)習(xí) React 中 7 種常用的條件渲染方式，從基礎(chǔ)到進(jìn)階，每種方式都配有代碼示例和適用場(chǎng)景分析。

什么是條件渲染？

簡(jiǎn)單說(shuō)，條件渲染就是根據(jù)特定條件（如變量值、狀態(tài)、屬性等），讓組件呈現(xiàn)不同的 UI。

比如一個(gè)簡(jiǎn)單場(chǎng)景：

• 當(dāng)用戶已登錄（isLoggedIn = true），顯示 "歡迎回來(lái)，xxx"
• 當(dāng)用戶未登錄（isLoggedIn = false），顯示 "請(qǐng)登錄"

這就是最基礎(chǔ)的條件渲染需求。React 沒(méi)有專門的 "條件渲染語(yǔ)法"，而是通過(guò) JavaScript 的邏輯結(jié)合 JSX 實(shí)現(xiàn)，非常靈活。

7 種常用的條件渲染方式

1. if/else 語(yǔ)句：最直觀的條件判斷

最基礎(chǔ)也最容易理解的方式：用 JavaScript 的if/else語(yǔ)句在組件中拆分不同渲染邏輯。

[圖片上傳失敗...(image-476fd-1753183662856)]

import { useState } from 'react';

function UserGreeting() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 用if/else判斷條件，返回不同JSX
  if (isLoggedIn) {
    return <h1>歡迎回來(lái)，用戶！</h1>;
  } else {
    return <h1>請(qǐng)先登錄~</h1>;
  }

  // 也可以在return前定義內(nèi)容
  // let content;
  // if (isLoggedIn) {
  //   content = <h1>歡迎回來(lái)，用戶！</h1>;
  // } else {
  //   content = <h1>請(qǐng)先登錄~</h1>;
  // }
  // return content;
}

適用場(chǎng)景：

• 邏輯較復(fù)雜的條件判斷（比如多個(gè)條件組合）
• 需要在渲染前處理大量邏輯（如數(shù)據(jù)轉(zhuǎn)換）

優(yōu)點(diǎn)：直觀易懂，符合 JavaScript 思維；適合復(fù)雜條件。
缺點(diǎn)：在 JSX 中無(wú)法直接使用，必須在 return 外處理。

2. 三元運(yùn)算符：JSX 中直接寫簡(jiǎn)單條件

三元運(yùn)算符（condition ? exprIfTrue : exprIfFalse）可以直接嵌入 JSX 中，適合簡(jiǎn)單的二選一渲染。

[圖片上傳失敗...(image-d8639d-1753183662856)]

import { useState } from 'react';

function ScoreDisplay() {
  const [score, setScore] = useState(75);

  return (
    <div>
      <p>你的成績(jī)：{score}</p>
      {/* 三元運(yùn)算符直接寫在JSX中 */}
      <p>{score >= 60 ? '恭喜，及格了！' : '抱歉，未及格'}</p>
    </div>
  );
}

適用場(chǎng)景：

• 簡(jiǎn)單的二選一判斷（是 / 否、大于 / 小于等）
• 需要在 JSX 中直接嵌入條件邏輯

優(yōu)點(diǎn)：簡(jiǎn)潔，可直接嵌入 JSX；適合簡(jiǎn)單條件。
缺點(diǎn)：條件復(fù)雜時(shí)可讀性差（不建議嵌套三元運(yùn)算符）。

3. 邏輯與 (&&) 運(yùn)算符：滿足條件才渲染元素

當(dāng)你需要 "條件滿足時(shí)顯示某個(gè)元素，不滿足時(shí)不顯示"（而不是顯示另一個(gè)元素），可以用&&運(yùn)算符。

[圖片上傳失敗...(image-4f8587-1753183662856)]

import { useState } from 'react';

function Notification() {
  const [unreadCount, setUnreadCount] = useState(3);

  return (
    <div>
      <h2>消息中心</h2>
      {/* 當(dāng)unreadCount > 0時(shí)，顯示小紅點(diǎn)和數(shù)量 */}
      {unreadCount > 0 && (
        <span style={{ 
          backgroundColor: 'red', 
          color: 'white', 
          borderRadius: '50%',
          padding: '2px 6px',
          marginLeft: '8px'
        }}>
          {unreadCount}
        </span>
      )}
    </div>
  );
}

原理：
JavaScript 中，true && expr會(huì)返回expr，false && expr會(huì)返回false，而 React 會(huì)忽略false的渲染。

注意：

• 避免用 0 作為條件值，因?yàn)?code>0 && ...會(huì)渲染 0（而非不渲染）。
  解決：unreadCount > 0 && ...（明確返回布爾值）。

適用場(chǎng)景：

• 條件滿足時(shí)渲染某個(gè)元素，不滿足時(shí)不渲染（單分支）
• 簡(jiǎn)單的 "存在即顯示" 邏輯（如未讀消息、提示標(biāo)簽）

4. 元素變量：先存后用，適合多條件

先將不同條件對(duì)應(yīng)的 JSX 賦值給變量，再在 return 中使用變量。適合多條件分支場(chǎng)景。

[圖片上傳失敗...(image-cea598-1753183662856)]

import { useState } from 'react';

function UserRole() {
  const [role, setRole] = useState('user'); // 可能的值：'user' | 'admin' | 'guest'
  
  // 定義元素變量，根據(jù)條件賦值
  let roleDesc;
  if (role === 'admin') {
    roleDesc = <p>您擁有管理員權(quán)限，可以管理所有內(nèi)容</p>;
  } else if (role === 'user') {
    roleDesc = <p>您是普通用戶，可以查看和編輯自己的內(nèi)容</p>;
  } else {
    roleDesc = <p>您是訪客，僅可查看公開(kāi)內(nèi)容</p>;
  }

  return (
    <div>
      <h2>用戶權(quán)限</h2>
      {roleDesc} {/* 使用變量 */}
    </div>
  );
}

適用場(chǎng)景：

• 多個(gè)條件分支（3 個(gè)及以上）
• 需要在渲染前對(duì)元素進(jìn)行額外處理（如添加樣式、綁定事件）

優(yōu)點(diǎn)：邏輯清晰，變量名可增強(qiáng)可讀性；避免 JSX 中混入大量條件判斷。

5. switch-case 語(yǔ)句：多分支條件的規(guī)范寫法

當(dāng)條件分支較多（如根據(jù)不同狀態(tài)碼顯示不同提示），用switch-case比if/else更整潔。

[圖片上傳失敗...(image-2601a1-1753183662856)]

import { useState } from 'react';

function StatusMessage() {
  const [status, setStatus] = useState('pending'); // 'pending' | 'success' | 'error' | 'warning'
  
  // 用switch-case返回不同內(nèi)容
  function getMessage() {
    switch (status) {
      case 'pending':
        return <p>加載中，請(qǐng)稍候...</p>;
      case 'success':
        return <p style={{ color: 'green' }}>操作成功！</p>;
      case 'error':
        return <p style={{ color: 'red' }}>操作失敗，請(qǐng)重試</p>;
      case 'warning':
        return <p style={{ color: 'orange' }}>注意：數(shù)據(jù)不完整</p>;
      default:
        return <p>未知狀態(tài)</p>;
    }
  }

  return (
    <div>
      <h2>操作狀態(tài)</h2>
      {getMessage()} {/* 調(diào)用函數(shù)返回結(jié)果 */}
    </div>
  );
}

適用場(chǎng)景：

• 多個(gè)固定值的條件分支（如狀態(tài)碼、類型標(biāo)識(shí)）
• 需要明確 "默認(rèn)情況"（default分支）的場(chǎng)景

優(yōu)點(diǎn)：結(jié)構(gòu)清晰，比多個(gè)if/else if更易維護(hù)；強(qiáng)制考慮默認(rèn)情況。

6. 自定義條件組件：封裝復(fù)用條件邏輯

如果多個(gè)組件需要相同的條件渲染邏輯，可以封裝成自定義組件，提高復(fù)用性。

[圖片上傳失敗...(image-287be7-1753183662856)]

// 封裝一個(gè)"權(quán)限控制組件"
function WithPermission({ permission, children, fallback = null }) {
  // 模擬權(quán)限判斷邏輯（實(shí)際項(xiàng)目可能更復(fù)雜）
  const hasPermission = checkUserPermission(permission);
  
  // 有權(quán)限則顯示children，否則顯示fallback
  return hasPermission ? children : fallback;
}

// 模擬權(quán)限檢查函數(shù)
function checkUserPermission(permission) {
  const userPermissions = ['read', 'edit']; // 假設(shè)用戶擁有的權(quán)限
  return userPermissions.includes(permission);
}

// 使用示例
function Dashboard() {
  return (
    <div>
      <h1>控制臺(tái)</h1>
      {/* 所有用戶可見(jiàn) */}
      <p>歡迎來(lái)到控制臺(tái)</p>
      
      {/* 僅有權(quán)限'edit'的用戶可見(jiàn) */}
      <WithPermission permission="edit" fallback={<p>無(wú)編輯權(quán)限</p>}>
        <button>編輯內(nèi)容</button>
      </WithPermission>
      
      {/* 僅有權(quán)限'delete'的用戶可見(jiàn)（無(wú)權(quán)限時(shí)不顯示） */}
      <WithPermission permission="delete">
        <button>刪除內(nèi)容</button>
      </WithPermission>
    </div>
  );
}

適用場(chǎng)景：

• 多個(gè)組件需要相同的條件邏輯（如權(quán)限控制、角色判斷）
• 條件邏輯較復(fù)雜，需要集中維護(hù)

優(yōu)點(diǎn)：邏輯復(fù)用，減少重復(fù)代碼；組件職責(zé)單一，更易測(cè)試。

7. 動(dòng)態(tài)導(dǎo)入 + Suspense：按需加載組件（React 18+）

對(duì)于大型應(yīng)用，可根據(jù)條件動(dòng)態(tài)導(dǎo)入組件（未滿足條件時(shí)不加載組件代碼），配合Suspense顯示加載狀態(tài)。

import { Suspense, useState, lazy } from 'react';

// 動(dòng)態(tài)導(dǎo)入組件（只在需要時(shí)加載）
const PremiumFeature = lazy(() => import('./PremiumFeature'));
const FreeFeature = lazy(() => import('./FreeFeature'));

function App() {
  const [isPremium, setIsPremium] = useState(false);

  return (
    <div>
      <h1>應(yīng)用功能</h1>
      {/* 免費(fèi)功能始終顯示 */}
      <Suspense fallback={<p>加載免費(fèi)功能中...</p>}>
        <FreeFeature />
      </Suspense>
      
      {/* 付費(fèi)功能僅付費(fèi)用戶可見(jiàn)，且僅在需要時(shí)加載代碼 */}
      {isPremium && (
        <Suspense fallback={<p>加載高級(jí)功能中...</p>}>
          <PremiumFeature />
        </Suspense>
      )}
    </div>
  );
}

適用場(chǎng)景：

• 大型應(yīng)用的代碼分割（減少初始加載體積）
• 條件觸發(fā)的 "重量級(jí)" 組件（如付費(fèi)功能、模態(tài)框）

優(yōu)點(diǎn)：優(yōu)化性能，減少不必要的代碼加載；配合 Suspense 提升用戶體驗(yàn)。

三、條件渲染避坑的點(diǎn)

1. 避免渲染undefined
   確保條件判斷的分支都有返回值，否則可能出現(xiàn)undefined導(dǎo)致的白屏。
   不好的示例：{condition && undefined}（會(huì)渲染undefined）
2. 謹(jǐn)慎嵌套條件
   多層嵌套的三元運(yùn)算符或if/else會(huì)導(dǎo)致代碼可讀性差，建議拆分為多個(gè)組件或用元素變量。
3. 注意 falsy 值的渲染
   React 會(huì)渲染0、''（空字符串）等 falsy 值，而非忽略它們。
   解決：用!!轉(zhuǎn)為布爾值，或明確判斷> 0等。

四、如何選擇合適的方式？

記?。簺](méi)有 "最好" 的方式，只有 "最合適" 的方式。根據(jù)條件復(fù)雜度、復(fù)用需求和項(xiàng)目場(chǎng)景選擇即可。

以上就是本文的全部?jī)?nèi)容了，想了解更多React用法可以在《React中文教程》里查閱