ReactJS 中的内联条件表达式是什么？

在 react 中，条件渲染是基于特定条件显示组件的过程。例如，在构建待办事项应用程序时，开发人员应仅在任何待处理任务可用时才显示任务，否则他们可能会显示“没有可用的待处理任务”之类的消息。

在本教程中，我们将介绍 React 中内联条件渲染的概念。正如内联条件所暗示的，我们可以将条件写在一行中。 React 中有几种内联条件渲染的方法。

用户需要先在本地电脑上设置 react 项目环境。

创建新的反应项目

第 1 步：要创建一个新的 react 应用程序，请在终端上运行以下命令。

npx create-react-app testapp

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

cd testapp

项目目录：它应该如下图所示。

方法一：内联 if-else 条件（三元）运算符
程序员可以使用三元运算符( ? : ) 作为简短的 if-else 语句。三元运算符是一个简单的 javascript运算符，它接受 3 个操作数。

句法：

在使用三元运算符时，开发人员需要将整个表达式包裹在花括号中。为了提高代码的可读性，用户可以将操作数包裹在括号内。

{
  condition ? ("condition is true") : ("condition is false")
}

当条件为真时，返回“条件为真”，否则返回“条件为假”。在这里，开发人员可以将组件作为操作数而不是 HTML 元素。

例子：

现在，编辑 App.js 文件并将以下代码添加到其中。

文件名：App.js

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

Javascript

import React, { Component } from 'react';
 
// rendering different message according to the
// value of total task variable
class App extends Component {
  render() {
    const todoList = ['write article', 'read article', 'Review article'];
    const totalTask = todoList.length;
    return (
      

         
GeeksForGeeks
         {totalTask > 0 ?
         (
The user has total {totalTask} task pending
) :
         (
The user has not any task pending
) }      
      
    );
  }
}
  
export default App;

运行命令：

npm start

输出：

在上面的输出图像中，用户可以看到它显示“用户有 3 个待处理任务”，因为用户总共有 3 个任务要做。

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

这里，逻辑 &&运算符是一个布尔运算符，它在 React 中的工作方式与在 Javascript 中的工作方式相同。它需要 2 个条件作为操作数。如果第一个条件为真，它只评估第二个条件。在这里，我们可以添加反应组件，而不是添加条件作为第二个操作数。所以，如果第一个条件成立，它只会渲染反应组件。

句法：

开发人员需要用大括号嵌入表达式。如果需要，他们可以将操作数包装在括号内以保持代码干净。

{
   (condition) && (React component or HTML code)
}

当条件评估为True 时，它返回正确的部分（反应组件或 HTML 代码）作为输出......

例子：

文件名：App.js

在此文件中，我们将编写代码以根据“ totalTask”变量的值呈现消息。

Javascript

import React, { Component } from 'react';
 
// using inline if with logical && operator
class App extends Component {
  render() {
    const todoList = [];
    const totalTask = todoList.length;
    return (
      

        
GeeksForGeeks
         {
           (totalTask > 0) &&
           (
The user has total {totalTask} task pending
)
         }
         {
           (totalTask === 0) &&
           (
The user has not any pending task.
)
         }    
      
    );
  }
}
  
export default App;
export default App;

运行命令：

npm start

输出：

在上图中，用户可以看到它在评估 (totalTask === 0) 条件时显示消息“用户没有待处理的任务”。