深入理解 ReactJS 中的内联条件表达式

在 React 中，条件渲染是指根据特定条件来展示组件的过程。通过使用 React 的内联条件表达式，我们可以在单行代码中编写条件逻辑。例如，在构建待办事项列表应用时，开发者应该仅在存在待处理任务时显示任务列表，否则可以展示类似“当前没有待处理任务”的消息。

我们可以通过以下几种方式在 React 中使用内联条件：

目录

• 内联 if-else 条件（三元）运算符
• 使用逻辑 && 运算符的内联 If

创建 React 应用的步骤

步骤 1： 若要创建一个新的 React 应用，请在终端中运行以下命令。

npx create-react-app testapp

步骤 2： 现在，使用以下命令进入项目目录。

cd testapp

项目结构：

!image

方法 1：内联 if-else 条件（三元）运算符

三元运算符( ? : ) 是一种简写的 if-else 语句。三元运算符是一个简单的 JavaScript 运算符，它接受 3 个操作数。

语法

****{****条件 ? ("条件为真时的内容") : ("条件为假时的内容") ****}****

当条件为真（true）时，它返回“条件为真时的内容”，否则返回“条件为假时的内容”。在这里，我们可以将这些字符串替换为 JSX 组件。

示例 在这里，我们将声明一个名为 ‘totalTask‘ 的变量并为其赋值。接下来，我们将使用三元运算符根据 ‘totalTask‘ 变量的值来显示不同的消息。

JavaScript


CODEBLOCK_88332339

运行应用程序的步骤： 使用以下命令从项目的根目录运行应用程序：

npm start

输出： 现在打开浏览器并访问 http://localhost:3000/，您将看到以下输出：

!image

方法 2： 使用逻辑 && 运算符的内联 If

在这里，逻辑 && 运算符是一个布尔运算符，它在 React 中的工作方式与在 Javascript 中相同。它接受 2 个条件作为操作数。如果第一个条件为 True（真），它才会评估第二个条件。在这里，我们可以添加 React 组件作为第二个操作数，而不是添加条件。因此，如果第一个条件变为真，它就只会渲染 React 组件。

语法

开发者需要将表达式嵌入花括号中。如果需要，他们可以将操作数包装在括号内以保持代码整洁。

{(条件)  &&  (React 组件或 JSX 代码) }

当条件评估为 True（真） 时，它会返回右侧部分（React 组件或 JSX 代码）作为输出…

示例： 我们将编写一段代码，根据 ‘totalTask‘ 变量的值来渲染消息。

JavaScript


CODEBLOCK_1a186de9

运行应用程序的步骤： 使用以下命令从项目的根目录运行应用程序：

npm start