在 React 中，條件渲染可以通過多種方式，不同的使用方式場(chǎng)景取決于不同的上下文。 在本文中，我們將討論所有可用于為 React 中的條件渲染編寫更好的代碼的方法。

條件渲染在每種編程語(yǔ)言（包括 javascript）中都是的常見功能。 在 javascript 中，我們通常使用if else 語(yǔ)句，switch case語(yǔ)句和三元運(yùn)算符編寫條件渲染。

以上所有這些方法都適用于 React。 但是問題是，我們?nèi)绾尾拍苡行У厥褂盟鼈儯?/p>

像你知道的那樣，React 具有 JSX 標(biāo)記，通常我們需要實(shí)現(xiàn)條件邏輯去控制組件。 但是，我們不能在 JSX 中直接使用常見的 if else或switch case語(yǔ)句。

在 JSX 中，我們應(yīng)該使用其他條件渲染方法，例如三元運(yùn)算符和&&運(yùn)算符。 在這里，我們將討論更多細(xì)節(jié)。

以下是我積累的 7 種條件渲染方法，它們可以在 React 中使用。 每種方式在一定的情況下都有自己的優(yōu)勢(shì)。

目錄

• If Else條件渲染
• 使用三元運(yùn)算符進(jìn)行條件渲染
• &&運(yùn)算符的條件渲染
• 帶switch case多條件渲染
• 枚舉對(duì)象的多條件渲染
• HOC(高階組件)條件渲染
• 帶有外部庫(kù)的 JSX 條件渲染

1.If Else條件渲染

最佳實(shí)踐概述

• 在 JSX 標(biāo)記之外的任何地方使用
• 或者，如果你想在 if-else 塊中執(zhí)行多行代碼

這是所有程序員都能想到的第一個(gè)方法，即常見的 if-else語(yǔ)句。 我們可以在 React 項(xiàng)目中的任何地方使用它。

在 React 中，如果要在 if 或者 else 塊內(nèi)部或 JSX 外部的任何地方執(zhí)行多行代碼，最好使用通用的 if-else 語(yǔ)句。

例如，如果用戶登錄，我們想執(zhí)行一些代碼。

// * Conditional rendering with common if-else statement.
if (isLoggedIn) {
 setUserProfile(userData);
 setUserHistory(userHistory);
 // other block of codes;
} 

或者，當(dāng)你想基于用戶角色定義可訪問的內(nèi)容時(shí)。

if (userProfile.role === "superadmin") {
 initSuperAdminFunction();
 initSuperAdminComponent();
 // other block of codes;
} else if (userProfile.role === "admin") {
 initAdminFunction();
 initAdminComponent();
 // other block of codes;
} else {
 initUserComponent();
 // other block of codes;
} 

如果你只想執(zhí)行一行代碼，例如在 if 或 else 塊中調(diào)用函數(shù)，則可以刪除括號(hào)。

if (userProfile.role === "superadmin") initSuperAdminComponent();
else if (userProfile.role === "admin") initAdminFunction();
else initUserComponent(); 

if-else 中不帶括號(hào)的條件僅適用于其正下方的一行代碼。

JSX 中的 if else 語(yǔ)句

你可能知道，我們可以在 JSX 中的方括號(hào){}中注入和混合一些 javascript 代碼。 但是它有一些局限性。

你不能直接向其中插入 if-else 語(yǔ)句。 在 JSX 中注入 if-else 語(yǔ)句僅適用于立即調(diào)用函數(shù)表達(dá)式（IIFE），如下所示：

return (
 <div>
  {(() => {
   if (isLoggedIn) {
    return <div>I'm logged in.</div>;
   }
  })()}
 </div>
); 

如你所見，僅 if 語(yǔ)句就太冗長(zhǎng)了。 這就是為什么我不建議在 JSX 中使用 if-else 語(yǔ)句的原因。

繼續(xù)閱讀 JSX 中還有其他一些條件渲染的方法。

2.使用三元運(yùn)算符進(jìn)行條件渲染

最佳實(shí)踐概覽

• 條件變量或函數(shù)返回值賦值
• 當(dāng)你只想寫一行代碼來(lái)做條件判斷
• 于 JSX 中的條件渲染

三元運(yùn)算符是常見 if-else 語(yǔ)句的快捷方式。 使用三元運(yùn)算符，你可以在行內(nèi)編寫條件渲染，也可以只編寫一行代碼。

讓我們看一下條件渲染的變量值分配示例。

// Conditional rendering with common if else
let isDrinkCoffee;
if (role === "programmer") {
 isDrinkCoffee = true;
} else {
 isDrinkCoffee = false;
}

// Conditional rendering with ternary operator
let isDrinkCoffee = role === "programmer" ? true : false; 

這是函數(shù)返回值的條件渲染示例：

// Conditional rendering with common if else
function isDrinkCoffee(role) {
 if (role === "programmer") {
  return true;
 } else {
  return false;
 }
}

// Conditional rendering with ternary operator
function isDrinkCoffee(role) {
 return role === "programmer" ? true : false;
} 

如你所見， 你用了三元運(yùn)算符，就用用一行代碼來(lái)代替 if-else 語(yǔ)句。

你也可以在 JSX 中使用三元運(yùn)算符，而不是將 if-else 與立即調(diào)用函數(shù)表達(dá)式（IIFE）一起使用。

假設(shè)我們要基于 isShow 狀態(tài)有條件地渲染一個(gè)小組件。 您可以這樣編寫條件渲染。

return <div>{isShow ? <SmallComponent /> : null}</div>;

if-else if-else使用三元運(yùn)算符

在上面的示例中，我僅向你展示如何使用三元運(yùn)算符替換 if-else 語(yǔ)句。

三元運(yùn)算符還可用于替換多個(gè)條件渲染（if-else if-else）或嵌套的條件渲染。

但是，我不建議你使用它，因?yàn)樗绕胀ǖ?if-else語(yǔ)句更難讀。

假設(shè)你要在 JSX 中實(shí)現(xiàn)嵌套的條件渲染。

return (
 <div>
  {condition_a ? (
   <ComponentA />
  ) : condition_b ? (
   <ComponentB />
  ) : condition_c ? (
   <ComponentC />
  ) : (
   <ComponentD />
  )}
 </div>
); 

看起來(lái)非常亂，是吧？

對(duì)于這種情況，使用 IIFE，switch-case 語(yǔ)句或枚舉對(duì)象比三元運(yùn)算符更好。

3.&&運(yùn)算符的條件渲染

最佳實(shí)踐概覽

• 使用它進(jìn)行簡(jiǎn)單的條件渲染，不必去執(zhí)行"else"塊中的代碼。
  

使用三元運(yùn)算符，可以縮短 if-else 語(yǔ)句的代碼量，并為 JSX 中的條件渲染提供更好的選擇。

但是，你知道有比三元運(yùn)算符更簡(jiǎn)單的方法嗎？

&&運(yùn)算符可用于替換此類 if 語(yǔ)句。

// Instead of using ternary operator,
{
 isShow ? <SmallComponent /> : null;
}

// Use short-circuit && operator
{
 isShow && <SmallComponent />;
} 

在三元運(yùn)算符中，即使沒有"else"條件，也需要寫"null"表達(dá)式以避免語(yǔ)法錯(cuò)誤。

使用&&運(yùn)算符，你不需要寫多余的代碼。

但是，請(qǐng)記住，不能將&&運(yùn)算符替換為if-else語(yǔ)句，更不用說if-else if-else語(yǔ)句了。

4.帶 switch 的多條件渲染-案例

可以在任何位置使用它來(lái)進(jìn)行多個(gè)條件渲染，而只有一個(gè)變量可以判斷條件。

像if-else語(yǔ)句一樣，switch-case語(yǔ)句也是幾乎每種編程語(yǔ)言中的常見功能。

它用于具有相同類型條件的多個(gè)條件渲染。

例如，我們可以使用switch-case語(yǔ)句根據(jù)用戶角色呈現(xiàn)特定的變量值。

let welcomeMessage;
switch (role) {
 case "superadmin":
  welcomeMessage = "Welcome Super Admin";
 // you can put other codes here as well.
 case "admin":
  welcomeMessage = "Welcome Admin";
 // you can put other codes here as well.
 case "user":
  welcomeMessage = "Welcome User";
 // you can put other codes here as well.
 default:
  welcomeMessage = "Welcome Guest";
 // you can put other codes here as well.
} 

你還可以使用switch-case語(yǔ)句在 JSX 中進(jìn)行條件渲染。 但是，你需要將其包裝在 IIFE 中。

假設(shè)你要呈現(xiàn)一個(gè)基于 alert 狀態(tài)設(shè)置樣式的alert組件。

return (
 <div>
  {(() => {
   switch (status) {
    case "warning":
     return <AlertComponent status="warning" message={messageState} />;
    case "error":
     return <AlertComponent status="error" message={messageState} />;
    case "success":
     return <AlertComponent status="success" message={messageState} />;
    default:
     return <AlertComponent status="info" message={messageState} />;
   }
  })()}
 </div>
); 

你可能已經(jīng)注意到，兩個(gè)示例都只有一個(gè)變量（role和status）來(lái)判斷條件。 這就是我之前所說的相同類型的條件。

switch-case語(yǔ)句不能用于處理復(fù)雜和不同類型的條件。但是你可以使用通用的if-else if-else語(yǔ)句去處理那些場(chǎng)景。

5.枚舉對(duì)象的多重條件渲染

僅當(dāng)您要分配具有多個(gè)條件的變量值或返回值時(shí)，才使用它。

枚舉對(duì)象還可以用于在 React 中實(shí)現(xiàn)多個(gè)條件渲染。 對(duì)于 JSX 標(biāo)記中的 switch-case語(yǔ)句，它是更好的選擇。

如你所知，在第 5 種方法中，你應(yīng)該將switch-case語(yǔ)句包裝在 JSX 的 IIFE 中。 使用枚舉對(duì)象，你不需要這樣做。

讓我們用一個(gè)以前的一個(gè)示例來(lái)距離。 你要基于狀態(tài)呈現(xiàn) alert 組件。 這是使用枚舉對(duì)象有條件地呈現(xiàn)它的方式。

const ALERT_STATUS = {
 warning: <AlertComponent status="warning" />,
 error: <AlertComponent status="error" />,
 success: <AlertComponent status="success" />,
 info: <AlertComponent status="info" />,
};

return <div>{ALERT_STATUS[status]}</div>; 

你需要?jiǎng)?chuàng)建一個(gè)枚舉對(duì)象，首先稱為“ ALERT_STATUS”。 然后，只需在 JSX 中使用 []括號(hào)內(nèi)的狀態(tài)變量來(lái)調(diào)用它，該變量的值為'warning'，'error'，'success'或'info'。

如果需要傳遞其他道具或?qū)傩?，則可以將 ALERT_STATUS 更改為這樣的函數(shù)。

const ALERT_STATUS = (message) => ({
 warning: <AlertComponent status="warning" message={message} />,
 error: <AlertComponent status="error" message={message} />,
 success: <AlertComponent status="success" message={message} />,
 info: <AlertComponent status="info" message={message} />,
});

return <div>{ALERT_STATUS(messageState)[status]}</div>; 

你還可以將變量傳遞給 alert 組件。

let newVariable = ALERT_STATUS(messageState)[status];

當(dāng)然，你應(yīng)該首先定義枚舉對(duì)象。

將枚舉對(duì)象拆分到單獨(dú)文件來(lái)復(fù)用

關(guān)于使用枚舉對(duì)象進(jìn)行條件渲染的最好的特性是可以復(fù)用。

回到示例案例，Alert 組件是 React 中通?？芍赜玫慕M件。 因此，當(dāng)你要有條件地渲染它時(shí)，也可以讓它復(fù)用。

你可以在單獨(dú)的文件中定義枚舉，然后將它導(dǎo)出。

import React from "react";
import AlertComponent from "./path/to/AlertComponent";

export const ALERT_STATUS = (message) => ({
 warning: <AlertComponent status="warning" message={message} />,
 error: <AlertComponent status="error" message={message} />,
 success: <AlertComponent status="success" message={message} />,
 info: <AlertComponent status="info" message={message} />,
}); 

然后，在要在組件中使用它時(shí)將其導(dǎo)入。

import { ALERT_STATUS } from "./alertStatus";

用法與以前相同。

6.HOC 條件渲染

最佳做法摘要

如果要在渲染組件之前實(shí)現(xiàn)或檢查某些條件，請(qǐng)使用它。

高階組件（HOC）可用于在 React 中實(shí)現(xiàn)條件渲染。 當(dāng)你要運(yùn)行某些邏輯或在渲染組件之前進(jìn)行檢查時(shí)，可以使用它。

例如，你要在訪問某些組件之前檢查用戶是否已通過身份驗(yàn)證。

你可以使用 HOC 來(lái)保護(hù)那些組件，而不是在每個(gè)需要身份驗(yàn)證的組件中編寫if-else語(yǔ)句。

// This is Higher Order Component
import React from "react";
export default function withAuthentication(Component) {
 // some code of authentication logic/service that result an isLoggedIn variable/state:
 let isLoggedIn = true;

 return function AuthenticatedComponent(props) {
  if (isLoggedIn) {
   return <Component {...props} />;
  } else {
   return <div class="alert alert-danger">You're not authenticated!</div>;
  }
 };
} 

然后，您可以將其導(dǎo)入并在組件中使用。

import withAuthentication from "./withAuthentication";
const AuthenticatedUIComponent = withAuthentication(AnUIComponent);

return (
 <div>
  <AuthenticatedUIComponent />
 </div>
); 

這樣更棒了，是嗎？

你可以將 HOC 用于其他可復(fù)用的條件渲染，例如加載指示器實(shí)現(xiàn)，空值檢查 等。

有關(guān) HOC（具有功能組件）的更多詳細(xì)信息，可以在 medium (https://medium.com/@albertchu539/higher-order-components-in-a-react-hooks-world-69fe1f0b0791)。

7.帶有外部庫(kù)的 JSX 條件渲染

最佳做法摘要

• 避免使用此方法。 熟悉上面的 6 種方法：D
  

盡管我不建議你使用此方法，但我只是想讓你知道，有一個(gè) babel 插件使 JSX 具有自己的條件渲染標(biāo)記。

使用 JSX 控制語(yǔ)句，您可以像這樣在 JSX 中編寫條件渲染。

<If condition={test}>
 <span>Truth</span>
</If>;

<Choose>
 <When condition={test1}>
  <span>IfBlock</span>
 </When>
 <When condition={test2}>
  <span>ElseIfBlock</span>
  <span>Another ElseIfBlock</span>
  <span>...</span>
 </When>
 <Otherwise>
  <span>ElseBlock</span>
 </Otherwise>
</Choose>; 

在編譯中，這些標(biāo)簽將轉(zhuǎn)換為三元運(yùn)算符。

一些開發(fā)人員使用此插件，因?yàn)樗鼘?duì)于 JSX 中的條件渲染看起來(lái)更具可讀性。

譯者注: 你還可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 IF 組件來(lái)實(shí)現(xiàn)簡(jiǎn)單的判斷。

const If = (props) => {
 const condition = props.condition || false;
 const positive = props.then || null;
 const negative = props.else || null;

 return condition ? positive : negative;
}; 

<IF condition={isLoggedIn} then={<Hello />} else={<div>請(qǐng)先登錄</div>} />

這就是你可以在 React 中用于條件渲染的所有 7 種方法。

編碼愉快！

譯文來(lái)自 https://dev.to/syakirurahman/react-conditional-rendering-best-practices-with-7-different-methods-16e3#6_Conditional_Rendering_with_HOC
原作者 Syakir Rahman

譯者: 藍(lán)色的秋風(fēng)(github/hua1995116)

到此這篇關(guān)于React 條件渲染最佳實(shí)踐小結(jié)(7種)的文章就介紹到這了,更多相關(guān)React 條件渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論