Morioh
Login
佴 芬嘉

佴 芬嘉

7 months ago

React 中的条件渲染：实用指南

想了解如何在 React 中使用条件渲染？本文介绍了基础知识，并向您展示了一些有用的示例和技巧。

如何在 React 应用程序中实现条件渲染

条件渲染是一个强大的工具，用于根据特定条件动态显示或隐藏 UI 元素。这使得我们的应用程序更具交互性和响应能力，因为它可以适应用户操作和数据更改。我们可以使用多种方法在 React 中有条件地渲染元素。它们包括：

  • 使用 if/else 语句
  • 使用三元运算符
  • 使用逻辑 AND 运算符
  • 使用 switch 语句
  • 使用高阶组件
  • 使用元素变量

为了说明这些技术是如何工作的，我们将构建一个导航栏（navbar）。导航栏通常包含指向网络应用程序各个部分的链接。但是，我们希望对未经身份验证的用户隐藏“购物车”页面的链接。为此，我们将创建 React 组件、定义状态并根据用户登录状态应用条件逻辑。

使用 If-else 语句

if-else 语句是控制流结构，允许我们根据条件测试是真还是假来执行不同的代码。它们可用于根据结果渲染组件。让我们看看它是如何工作的：

广告

 

if( condition ){
  The task to be done if the condition tests true 
}  
else {
  Tasks to be done when the condition is tested false 
}

现在，根据我们之前给出的场景，我们希望导航栏在用户登录时有一个额外的按钮，但在用户注销时保持正常状态。为此，我们将有一个 JSON 对象来存储用户的详细信息，包括他们的登录状态：

广告

{
"Users": [
{
"Name": "Yemi",
"Age": 23,
"cartProducts": ["Tote bag", "Sports Cap", "Trainers", "Joggers"],
"Status": "loggedIn"
},
{
"Name": "John",
"Age": 30,
"cartProducts": ["Laptop", "Mouse", "Keyboard"],
"Status": "loggedIn"
},
{
"Name": "Alice",
"Age": 25,
"cartProducts": ["Dress", "Shoes", "Bag"],
"Status": "loggedOut"
}
]
}

接下来，我们将创建一个逻辑来检查用户的状态并根据条件的结果呈现导航栏：

const user = users[0]; // Assuming we want to check the status of the first user
if (user.status === "loggedIn") {
return <LoggedInNavbar />;
} else {
return <LoggedOutNavbar />;
}

在此代码段中，我们访问具有 变量的 user.status 属性。该变量是一个布尔值，指示用户是否登录。在检查条件之前，我们创建一个名为 的常量变量，并将第一个元素（索引 ）的值赋给它) 来自 数组。由于是一个用户对象数组，因此这有效地提取了第一个用户对象的登录状态。loggedInuser0usersusers

现在，让我们详细看看如何使用 if-else 语句来渲染元素：

  • if 语句将条件作为其参数。在本例中，条件为 isLoggedIn。
  • 如果条件为 true，则执行 if 语句内的代码，该代码返回导航栏中的 View Cart 按钮元素。< /span>
  • 如果条件为 false，则执行 else 语句内的代码，这将呈现没有额外按钮的导航栏。
如果语句

这是 React 中根据条件有条件渲染元素的最常用方法之一。但是，它会使我们的代码更加冗长，尤其是在处理简单条件时。这就是三元运算符的用武之地，因为它是一种更简洁的替代方案。

使用三元运算符

A 三元运算符也称为条件运算符。这是编写 if-else 语句的一种更简单的方法。它由三个部分组成：

condition ? trueExpression : falseExpression
  • condition 是要评估的部分。
  • trueExpression 如果条件为真则执行。
  • falseExpression 如果条件为 false，则执行。

例如，我们之前用来渲染不同导航栏的代码片段可以使用三元运算符编写如下：

return ( <div> {user.status === "loggedIn" ? <LoggedInNavbar /> : <LoggedOutNavbar />}
</div>
);
};
export default App;

就像前面的场景一样，如果条件为 true，则执行表达式 LoggedInNavbar，呈现 LoggedInNavbar 组件。否则，将执行表达式 LoggedOutNavbar，呈现 LoggedOutNavbar 组件。

何时使用三元运算符

三元运算符最适合处理简单的条件语句，其中我们有两种可能的结果。但是，对于涉及多个条件或嵌套语句的更复杂的条件逻辑，使用 if-else 语句可能更合适。

使用逻辑 AND 运算符

AND 运算符是一种逻辑运算符，用于计算多个条件或表达式。它接受条件，并且仅当两个（或更多）条件测试为真时才测试为真。

例如，假设我们只希望注册为卖家并登录并使用仪表板按钮访问导航栏的用户：

const users = [
{
name: "Yemi",
age: 23,
cartProducts: ["Tote bag", "Sports Cap", "Trainers", "Joggers"],
status: "loggedIn",
userClass: "Admin",
},
];
const user = users[0]; // Assuming we want to check the status of the first user
if (user.status === "loggedIn" && user.userClass === "Admin") {
return <AdminNavbar />;
} else {
return <LoggedOutNavbar />;
}

在此代码段中，我们根据 users 数组中第一个用户的登录状态和用户类别确定要呈现哪个导航栏组件。它使用 if-else 语句来检查 user.status 和 user.userClass 属性是否满足指定条件。如果两个条件都为 true，则执行 if 块内的代码，返回 AdminNavbar 组件。

这表示以管理员身份登录的用户应该会看到特定于管理员的导航栏。如果其中一个或两个条件都为假，则执行 else 块内的代码，返回 LoggedOutNavbar 组件。这表明用户尚未登录或不是管理员，应该看到标准导航栏。

使用 Switch 语句

让我们考虑一个必须同时处理多个条件表达式的场景。例如，我们正在构建一个具有不同用户级别的应用程序，我们需要为每个级别呈现不同的页面。如果我们使用 if 语句渲染每个页面，它可能会变得复杂甚至庞大。这就是为什么 switch 语句是更好的选择。 Switch 语句是用于以更有组织的方式处理多个条件情况的构造。当我们有一个变量来检查多个可能值时，它们提供了更清晰的语法。

在条件渲染中，当我们想要使用特定变量（或属性）来确定根据不同情况渲染哪个组件或内容时， switch 语句会很有用。以下是它们如何工作的示例：

switch (user.userClass) {
case  "Admin":
return  <AdminNavbar  />;
case  "Customer":
return  <CustomerNavbar  />; // Assuming a customer should see the CustomerNavBar_
case  "Guest":
return  <GuestNavbar  />; // Assuming a guest should see the GuestNavbar_
default:
return  <LoggedOutNavbar  />;
}

在此示例中，MyComponent 采用 userClass 属性并使用 switch 语句根据 变量。，并且关联的组件被分配给userClass。每种情况对应不同的userClasscomponentToRender

开关盒

Switch 语句可以使我们的代码在处理多个条件情况时更具可读性和可维护性。当我们有一个可以取不同值的变量并且我们希望以不同的方式处理每种情况时，它们特别有用。

什么是高阶分量？

高阶组件 (HOC) 是 React 中的一种模式，允许我们重用组件逻辑。它们的工作原理是充当接受组件并返回新组件的函数。新组件通常是一个包装组件，它向原始组件添加了附加功能。它们用于执行添加数据获取、身份验证或条件渲染等任务。

高阶组件和条件渲染

使用 HOC 最常见的方法之一是条件渲染。这是因为它们可以获取一个组件并根据条件返回不同的组件。例如，我们可以使用 HOC 根据用户是否登录有条件地渲染组件。

以下是如何使用 HOC 有条件地渲染组件的示例：

import React from 'react';
const withLoginCheck = (WrappedComponent) => {
return (props) => {
if (isLoggedIn) {
return <WrappedComponent {...props} />;
} else {
return <p>Please log in to access this content.</p>;
}
};
};
const MyComponent = (props) => {
return <div>Hello, {props.name}!</div>;
};
const App = () => {
return (
<div>
<withLoginCheck(MyComponent) name="John Doe" />
</div>
);
};

在此示例中，withLoginCheck HOC 用于有条件地呈现MyComponent 组件。如果 isLoggedIn 变量为 true，则呈现 MyComponent 组件。否则，会显示一条消息，告诉用户登录。

使用 HOC 进行条件渲染的好处

使用 HOC 进行条件渲染有几个好处：

  • 可重用性。 HOC 可以在应用程序的不同部分中重用，从而节省时间和代码。
  • 可维护性。 HOC 可以通过将条件渲染逻辑封装在一个位置来使代码更易于维护。
  • 可测试性。 HOC 可以轻松测试，这有助于提高代码质量。

使用元素变量

元素变量是在 React 中有条件渲染 JSX 元素的另一种有效方法。它们允许我们将 JSX 元素存储在变量中，然后根据某些条件有条件地渲染这些变量。这种方式可以让我们的代码更加简洁，更容易阅读，尤其是在处理复杂的条件渲染场景时。例如，让我们考虑一个场景，我们希望根据用户的年龄显示不同的页面：

const user = { age: 25 };
const pageContent = user.age >= 18 ? (
<div>
<h1>Welcome, Adult User!</h1>
<p>You have access to all content.</p>
</div>
) : (
<div>
<h1>Welcome, Young User!</h1>
<p>You have access to age-appropriate content.</p>
</div>
);
return <div>{pageContent}</div>;

在此示例中，pageContent 变量保存将根据用户年龄呈现的 JSX 元素。条件运算符用于确定是为成年用户还是为年轻用户呈现内容。这种方法有效地将条件逻辑与 JSX 渲染分离，使代码更具可读性和可维护性。

渲染组件时处理加载状态

加载状态是React中的一个概念，它通知用户应用程序或网站正在积极处理或检索数据。条件渲染是用于处理加载状态的方法之一，因为它通常涉及根据数据加载过程的状态动态显示不同的 UI 元素。这改善了用户体验，因为它确保了应用程序的每个阶段都有反馈。

例如，我们可以在获取数据时有条件地渲染加载指示器，然后在实际数据可用时切换到渲染。这确保用户在适当的时间看到相关信息。

以下是如何使用条件渲染在获取数据时显示加载指示器的示例：

import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) => {
setData(json);
setIsLoading(false);
});
}, []);
return (
<div>
{isLoading ? <p>Loading...</p> : data.map((post) => <p key={post.id}>{post.title}</p>)}
</div>
);
};

在此示例中，isLoading 状态变量用于跟踪数据是否已加载。 useEffect 挂钩用于从 API 获取数据，一旦数据可用，isLoading 状态就会更新为 false。条件渲染逻辑确保在加载数据时渲染加载指示器，一旦数据可用，就会渲染帖子列表。

获取数据

使用组件状态进行动态渲染

组件状态是存储在组件中的可变数据，它允许我们存储和管理特定于该组件的信息。它在组件本身内进行管理，并且可以使用 setState() 方法进行更新。当状态发生变化时，React 会重新渲染组件及其子组件，使我们能够根据新的状态值动态更新 UI。例如：

import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};

在此示例中，Counter 组件维护状态变量 count 并使用 setCount() 方法更新它。 onClick 处理程序触发更新，React 重新渲染组件，更新显示的计数值。

使用 Props 进行动态渲染

Props 是由从父组件传递到子组件的数据组成的参数。它们提供了一种从父组件传递数据并控制子组件行为的方法。当父组件更新其 props 时，子组件会收到新数据并相应地重新渲染。

例如：

import React from 'react';
const Greeting = ({ name }) => {
return (
<p>Hello, {name}!</p>
);
};

const App = () => {
return (
<div>
<Greeting name="John Doe" />
<Greeting name="Jane Doe" />
</div>
);
};

在此示例中，Greeting 组件从 组件接收 name 属性。每当 组件更新 属性时， 组件就会重新渲染，为每个人显示适当的问候语。AppGreetingAppname

现在，就像我们提到的其他方法一样，组件状态或道具的变化可以触发条件渲染，根据更新的数据动态显示或隐藏特定元素。这些技术使我们能够构建能够根据用户交互、数据更改和应用程序内的信息流进行调整和更改的 UI 组件。例如：

import React, { useState } from 'react';
const UserStatus = ({ isAdmin }) => {
let statusElement;
if (isAdmin) {
statusElement = <p>Administrator</p>;
} else {
statusElement = <p>Customer</p>;
}
return (
<div>
{statusElement}
</div>
);
};

在此示例中，UserStatus 组件根据 isAdmin 属性的值有条件地呈现不同的 UI 元素。当 isAdmin 测试为 true 时，将呈现管理员消息。否则，将显示标准用户消息。

处理条件渲染中的错误

处理条件渲染中的错误对于创建健壮且用户友好的 React 应用程序至关重要。它涉及优雅地处理意外情况并向用户提供适当的反馈，防止他们遇到混乱或损坏的 UI 元素。出现这些错误的原因可能是：

  • 获取数据时出现故障
  • 用户输入无效
  • 组件配置错误

如何处理条件渲染中的错误

利用错误边界组件来捕获和处理其子组件内的错误。

实现后备 UI 元素以在发生错误时显示。这些元素可以提供信息性消息、替代内容或建议重试选项。

实施错误日志机制来记录和跟踪错误以进行调试和分析。这有助于识别重复出现的问题并改进错误处理策略。

向用户提供清晰且可操作的错误通知，告知他们问题并建议潜在的解决方案或解决方法。

条件渲染中处理错误的示例

import React from 'react';
const DataFetcher = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((json) => setData(json))
.catch((err) => setError(err));
}, []);
if (error) {
return <p>Error fetching data: {error.message}</p>;
}
if (!data) {
return <p>Loading...</p>;
}

return <div>{data.title}</div>;
};

在此示例中，DataFetcher 组件通过检查错误状态变量来处理潜在错误。如果发生错误，则会显示错误消息。如果数据仍在加载，则会显示加载指示器。成功获取数据后，将渲染实际数据。

处理错误

通过在条件渲染中添加有效的错误处理技术，我们可以创建具有弹性、用户友好且能够优雅地处理意外情况的 React 应用程序。

#react  #reactjs 

React 中的条件渲染：实用指南
1.05 GEEK