React 条件渲染最佳实践小结(7种)

在 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" ? true : false; 

这是函数返回值的条件渲染示例:

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

如你所见, 你用了三元运算符,就用用一行代码来代替 if-else 语句。

React 条件渲染最佳实践小结(7种)

扫一扫手机访问