p5.js 圓弧的用法

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

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

什么是條件渲染？

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

比如一個簡單場景：

  • 當用戶已登錄（isLoggedIn = true），顯示 "歡迎回來，xxx"
  • 當用戶未登錄（isLoggedIn = false），顯示 "請登錄"

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

7 種常用的條件渲染方式

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

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

[站外圖片上傳中...(image-45b0b4-1753199295724)]

import { useState } from 'react';

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

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

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

適用場景：

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

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

2. 三元運算符：JSX 中直接寫簡單條件

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

[圖片上傳失敗...(image-54a6c1-1753199295724)]

import { useState } from 'react';

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

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

適用場景：

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

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

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

當你需要 "條件滿足時顯示某個元素，不滿足時不顯示"（而不是顯示另一個元素），可以用&&運算符。

[圖片上傳失敗...(image-87f639-1753199295724)]

import { useState } from 'react';

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

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

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

注意：

  • 避免用 0 作為條件值，因為0 && ...會渲染 0（而非不渲染）。
    解決：unreadCount > 0 && ...（明確返回布爾值）。

適用場景：

  • 條件滿足時渲染某個元素，不滿足時不渲染（單分支）
  • 簡單的 "存在即顯示" 邏輯（如未讀消息、提示標簽）

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

先將不同條件對應的 JSX 賦值給變量，再在 return 中使用變量。適合多條件分支場景。

[圖片上傳失敗...(image-dba164-1753199295724)]

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>您是訪客，僅可查看公開內(nèi)容</p>;
  }

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

適用場景：

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

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

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

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

[圖片上傳失敗...(image-563126-1753199295724)]

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>加載中，請稍候...</p>;
      case 'success':
        return <p style={{ color: 'green' }}>操作成功！</p>;
      case 'error':
        return <p style={{ color: 'red' }}>操作失敗，請重試</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>
  );
}

適用場景：

  • 多個固定值的條件分支（如狀態(tài)碼、類型標識）
  • 需要明確 "默認情況"（default分支）的場景

優(yōu)點：結(jié)構(gòu)清晰，比多個if/else if更易維護；強制考慮默認情況。

6. 自定義條件組件：封裝復用條件邏輯

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

[圖片上傳失敗...(image-d1a7b6-1753199295724)]

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

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

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

適用場景：

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

優(yōu)點：邏輯復用，減少重復代碼；組件職責單一，更易測試。

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

對于大型應用，可根據(jù)條件動態(tài)導入組件（未滿足條件時不加載組件代碼），配合Suspense顯示加載狀態(tài)。

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

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

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

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

適用場景：

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

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

三、條件渲染避坑的點

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

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

方式 適用場景 優(yōu)點 缺點
if/else 復雜邏輯、多條件組合 直觀，適合復雜邏輯 不能直接嵌入 JSX
三元運算符 簡單二選一條件 簡潔，可嵌入 JSX 復雜條件可讀性差
邏輯與 (&&) 單分支（滿足條件才顯示） 極簡，適合簡單判斷 需注意 falsy 值渲染問題
元素變量 多條件分支，需預處理元素 邏輯清晰，易維護 需額外定義變量
switch-case 多個固定值的分支（如狀態(tài)碼） 結(jié)構(gòu)規(guī)范，強制默認分支 代碼量略多
自定義條件組件 復用條件邏輯（如權(quán)限控制） 復用性好，職責單一 需要額外封裝
動態(tài)導入 + Suspense 大型應用按需加載組件 優(yōu)化性能，減少初始體積 需 React 18 + 支持

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

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 在 React 開發(fā)中，我們經(jīng)常需要根據(jù)不同條件顯示不同內(nèi)容 —— 比如用戶登錄后顯示個人中心，未登錄時顯示登錄按...
    德育處主任閱讀 90評論 0贊 0
  • 九、CSS動畫 CSS動畫給網(wǎng)頁增添了生命力，從微妙的過渡效果到復雜的關鍵幀動畫，CSS提供了強大的工具來創(chuàng)建流暢...
    VialacteaSpace閱讀 218評論 0贊 0
  • React：創(chuàng)建一個簡單的 JSX 元素 React 是由 Facebook 創(chuàng)建和維護的開源視圖庫。它是渲染當代...
    HJSD閱讀 999評論 0贊 1
  • 介紹 Airbnb 的前端最近達到了一個重要的里程碑：我們所有的網(wǎng)頁面都已經(jīng)從 React 16升級到了當前的主要...
    涅槃快樂是金閱讀 217評論 0贊 1
  • 一，vue是什么？ Vue.js（讀音 /vju?/, 類似于view） 是一套構(gòu)建用戶界面的漸進式框架。與其他重...
    不成才的IT狗閱讀 3,200評論 0贊 31

友情鏈接更多精彩內(nèi)容