华山资源网

React 条件渲染最佳实践小结(7种)
网络编程 2024/12/23 佚名
3 1

在 React 中，条件渲染可以通过多种方式，不同的使用方式场景取决于不同的上下文。 在本文中，我们将讨论所有可用于为 React 中的条件渲染编写更好的代码的方法。

条件渲染在每种编程语言（包括 javascript）中都是的常见功能。 在 javascript 中，我们通常使用if else 语句，switch case语句和三元运算符编写条件渲染。

以上所有这些方法都适用于 React。 但是问题是，我们如何才能有效地使用它们？

像你知道的那样，React 具有 JSX 标记，通常我们需要实现条件逻辑去控制组件。 但是，我们不能在 JSX 中直接使用常见的 if else或switch case语句。

在 JSX 中，我们应该使用其他条件渲染方法，例如三元运算符和&&运算符。 在这里，我们将讨论更多细节。

以下是我积累的 7 种条件渲染方法，它们可以在 React 中使用。 每种方式在一定的情况下都有自己的优势。

目录

  • If Else条件渲染
  • 使用三元运算符进行条件渲染
  • &&运算符的条件渲染
  • 带switch case多条件渲染
  • 枚举对象的多条件渲染
  • HOC(高阶组件)条件渲染
  • 带有外部库的 JSX 条件渲染

1.If Else条件渲染

最佳实践概述

  • 在 JSX 标记之外的任何地方使用
  • 或者，如果你想在 if-else 块中执行多行代码

这是所有程序员都能想到的第一个方法，即常见的 if-else语句。 我们可以在 React 项目中的任何地方使用它。

在 React 中，如果要在 if 或者 else 块内部或 JSX 外部的任何地方执行多行代码，最好使用通用的 if-else 语句。

例如，如果用户登录，我们想执行一些代码。

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

或者，当你想基于用户角色定义可访问的内容时。

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;
}

如果你只想执行一行代码，例如在 if 或 else 块中调用函数，则可以删除括号。

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

if-else 中不带括号的条件仅适用于其正下方的一行代码。

JSX 中的 if else 语句

你可能知道，我们可以在 JSX 中的方括号{}中注入和混合一些 javascript 代码。 但是它有一些局限性。

你不能直接向其中插入 if-else 语句。 在 JSX 中注入 if-else 语句仅适用于立即调用函数表达式（IIFE），如下所示：

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

如你所见，仅 if 语句就太冗长了。 这就是为什么我不建议在 JSX 中使用 if-else 语句的原因。

继续阅读 JSX 中还有其他一些条件渲染的方法。

2.使用三元运算符进行条件渲染

最佳实践概览

  • 条件变量或函数返回值赋值
  • 当你只想写一行代码来做条件判断
  • 于 JSX 中的条件渲染

三元运算符是常见 if-else 语句的快捷方式。 使用三元运算符，你可以在行内编写条件渲染，也可以只编写一行代码。

让我们看一下条件渲染的变量值分配示例。

// 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" "htmlcode">



// 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" "htmlcode">



return <div>{isShow "htmlcode">



return (
 <div>
  {condition_a "color: #ff0000">3.&&运算符的条件渲染




最佳实践概览


    
  
  • 使用它进行简单的条件渲染，不必去执行"else"块中的代码。
    
  
    • 



使用三元运算符，可以缩短 if-else 语句的代码量，并为 JSX 中的条件渲染提供更好的选择。


但是，你知道有比三元运算符更简单的方法吗？


&&运算符可用于替换此类 if 语句。





// Instead of using ternary operator,
{
 isShow "else"条件，也需要写"null"表达式以避免语法错误。


使用&&运算符，你不需要写多余的代码。


但是，请记住，不能将&&运算符替换为if-else语句，更不用说if-else if-else语句了。


4.带 switch 的多条件渲染-案例




可以在任何位置使用它来进行多个条件渲染，而只有一个变量可以判断条件。




像if-else语句一样，switch-case语句也是几乎每种编程语言中的常见功能。


它用于具有相同类型条件的多个条件渲染。


例如，我们可以使用switch-case语句根据用户角色呈现特定的变量值。





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语句在 JSX 中进行条件渲染。 但是，你需要将其包装在 IIFE 中。


假设你要呈现一个基于 alert 状态设置样式的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>
); 






你可能已经注意到，两个示例都只有一个变量（role和status）来判断条件。 这就是我之前所说的相同类型的条件。


switch-case语句不能用于处理复杂和不同类型的条件。但是你可以使用通用的if-else if-else语句去处理那些场景。


5.枚举对象的多重条件渲染




仅当您要分配具有多个条件的变量值或返回值时，才使用它。




枚举对象还可以用于在 React 中实现多个条件渲染。 对于 JSX 标记中的 switch-case语句，它是更好的选择。


如你所知，在第 5 种方法中，你应该将switch-case语句包装在 JSX 的 IIFE 中。 使用枚举对象，你不需要这样做。


让我们用一个以前的一个示例来距离。 你要基于状态呈现 alert 组件。 这是使用枚举对象有条件地呈现它的方式。





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>; 






你需要创建一个枚举对象，首先称为“ ALERT_STATUS”。 然后，只需在 JSX 中使用 []括号内的状态变量来调用它，该变量的值为'warning'，'error'，'success'或'info'。


如果需要传递其他道具或属性，则可以将 ALERT_STATUS 更改为这样的函数。





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];






当然，你应该首先定义枚举对象。


将枚举对象拆分到单独文件来复用


关于使用枚举对象进行条件渲染的最好的特性是可以复用。


回到示例案例，Alert 组件是 React 中通常可重用的组件。 因此，当你要有条件地渲染它时，也可以让它复用。


你可以在单独的文件中定义枚举，然后将它导出。





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} />,
}); 







然后，在要在组件中使用它时将其导入。





import { ALERT_STATUS } from "./alertStatus";






用法与以前相同。


6.HOC 条件渲染




最佳做法摘要


如果要在渲染组件之前实现或检查某些条件，请使用它。




高阶组件（HOC）可用于在 React 中实现条件渲染。 当你要运行某些逻辑或在渲染组件之前进行检查时，可以使用它。


例如，你要在访问某些组件之前检查用户是否已通过身份验证。


你可以使用 HOC 来保护那些组件，而不是在每个需要身份验证的组件中编写if-else语句。





// 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>;
  }
 };
} 







然后，您可以将其导入并在组件中使用。





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

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







这样更棒了，是吗？


你可以将 HOC 用于其他可复用的条件渲染，例如加载指示器实现，空值检查 等。


有关 HOC（具有功能组件）的更多详细信息，可以在 medium (https://medium.com/@albertchu539/higher-order-components-in-a-react-hooks-world-69fe1f0b0791)。


7.带有外部库的 JSX 条件渲染




最佳做法摘要


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



尽管我不建议你使用此方法，但我只是想让你知道，有一个 babel 插件使 JSX 具有自己的条件渲染标记。


使用 JSX 控制语句，您可以像这样在 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>; 







在编译中，这些标签将转换为三元运算符。


一些开发人员使用此插件，因为它对于 JSX 中的条件渲染看起来更具可读性。


译者注: 你还可以实现一个简单的 IF 组件来实现简单的判断。





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

 return condition "htmlcode">



<IF condition={isLoggedIn} then={<Hello />} else={<div>请先登录</div>} />






这就是你可以在 React 中用于条件渲染的所有 7 种方法。


编码愉快！




译文来自 https://dev.to/syakirurahman/react-conditional-rendering-best-practices-with-7-different-methods-16e3#6_Conditional_Rendering_with_HOC

原作者 Syakir Rahman


译者: 蓝色的秋风(github/hua1995116)




                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
华山资源网 Design By www.eoogi.com

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.eoogi.com
                                            
                                                华山资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            120,135影音资源
                                        

                                        

                                            344,641技术资源
                                        

                                        

                                            22,817软件资源
                                        

                                        

                                            435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com