当前位置：慕源网 > React js教程：React 中的条件渲染和列表渲染（8）

React js教程：React 中的条件渲染和列表渲染（8）

作者 : 慕源网 本文共6344个字，预计阅读时间需要16分钟 发布时间： 2021-10-26 共372人阅读

本文是React 教程系列的一部分。您可以在此处找到本系列之前所有帖子的链接

介绍

在上一篇文章中，我们回顾了在 React 中绑定事件处理程序以及在 React 中使用方法作为属性。在本文中，我们将了解条件渲染以及如何在 React 中定义条件。此外，我们将看到如何在 React 中呈现列表。

条件渲染

我们可以通过 5 种方式定义条件渲染。

  1. If/Else
  2. 元素变量
  3. 三元运算符
  4. 短路运算符
  5. 立即 – 调用函数表达式 (IIFE)。

If/Else条件

If/Else 条件是指定条件语句的最简单方法。尽管对于每个 if/else 语句，都需要定义一个 return 语句，这使得代码重复且不易阅读和修改，但语法与 JavaScript 中的相同。

例如，看看这段代码。

import React from 'react';    
class ConditionalRendering extends React.Component{    
       constructor(props){    
           super(props);    
           this.state ={    
               IsLoggedIn : false    
           }    
        }    
    
       render(){    
          if(this.state.IsLoggedIn){    
               return <div>Welcome User </div>    
          }    
          else{    
              return <div>You need to login</div>    
          }    
    };    
}    
export default ConditionalRendering;

输出将显示如下，

更改 IsLogged : true 后，输出将略有不同。

如上例所示，每次都为每个 if 和 else 定义 return 语句。这只是一个演示示例，所以它只包含 2 个语句。然而，最常见的错误是有多个 if/else 语句和各种 return 语句；这使得 React 在任何条件更新时刷新整个 DOM。

简而言之，React 应用程序不应在 render() 方法中有多个 return 语句。所以，要解决这个问题，要么使用嵌入式 JSX 表达式，要么使用变量赋值来实现性能优化。

和上一篇文章一样，我们已经定义 React 从上到下执行搜索，在表示组件树中的更改后，只更新该部分，因此使用适当的条件语句来帮助 React 正确评估是合适的。现在，看看第二种方法。

元素变量

在 render() 方法中重复 return 语句的解决方案是元素变量。这种方法使用 JSX 变量，当条件返回 true 时存储值。然后在显示数据时使用该变量。

例如，

import React from 'react';    
class ConditionalRendering extends React.Component{    
       constructor(props){    
             super(props);    
            this.state ={    
                 IsLoggedIn : true    
            }    
        }    
    
      render(){    
            let message;     
           if(this.state.IsLoggedIn){    
                message = <div>Welcome User </div>;    
           }    
          else{     
               message = <div>You need to login</div>;    
          }    
    
        return message;    
     };    
}    
export default ConditionalRendering;

上述代码的输出如下。

主要的 render() 方法只有 1 个 return 语句，但没有必要使用 if-else 块。我们有另一种方法来简化这一点。

三元运算符

尽管使用 if/else 多个块语句，我们可以使用三元条件运算符。包括了：

Condition? Expr_if_true : expr_if_false;

运算符用大括号括起来，表达式可以包含 JSX，可选择用括号括起来以提高可读性，并可应用于组件的不同部分。

例如，

import React from 'react';    
class ConditionalRendering extends React.Component{    
       constructor(props){    
            super(props);    
            this.state ={    
                        IsLoggedIn : true    
            }    
      }    
          
      render(){    
            return this.state.IsLoggedIn? <div> Welcome User</div> : "";    
      };    
}    
export default ConditionalRendering;

例如，输出将显示与上面相同。

短路运算符

此运算符是短路运算符的扩展版本。它是使用 && 运算符的三元运算符的特殊情况和简化版本。

它不像 & 运算符首先计算右侧表达式。&& 运算符计算左侧表达式并计算结果。

因此，如果语句包含 false && expr，它不会评估 expr，因为该语句总是返回 false。

例如，

import React from 'react';    
class ConditionalRendering extends React.Component{    
       constructor(props){    
              super(props);    
              this.state ={    
                     IsLoggedIn : true    
              }    
       }    
           
       render(){    
              return this.state.IsLoggedIn && <div> Welcome User</div>;    
        };    
}    
export default ConditionalRendering;

输出将显示如下。

通过将 IsLoggedIn 的值更改为 false，输出将不会显示任何内容。
this.state ={    
      IsLoggedIn : false    
}

当我们没有多个嵌套语句时会使用这些技术，为此 React 提供了另一种称为立即调用函数表达式（IIFE）的方法。

立即执行函数表达式 (IIFE)

顾名思义，IIFE 是定义后立即执行的函数。

在下面的语法中，它被定义和使用。

function TestFunc(){    
}    
TestFunc();
但是如果我们需要在函数定义后立即执行：
(function TestFunc(/*args*/){    
}(/*args*/));

或者

(function TestFunc(/*args*/){    
})(/*args*/);
或者我们可以使用arrow函数：
(( /*args */ ) => {    
})( /* 参数 */ )

在 React 中，大括号用于使用上述任何条件语句并根据用户输出返回。

列表渲染

在 React 中，List 数组在浏览器中可以有很多种显示方式，我们会一步一步来。让我们从第一种方法开始。

使用数组索引

列表项可以使用数组索引在浏览器中显示，但是这种方法变得非常乏味，因为它包含代码重复，如果数组的数量很大，那么这不是一个好方法。

例如：

import React from 'react';    
    
function EmployeeList(){    
          const employee = ['zbc','xyz'];    
              return(    
                  <div>    
                            <h2>{employee[0]}</h2>    
                            <h2>{employee[1]}</h2>     
                  </div>    
         )    
}    
export default EmployeeList;

输出将显示如下

这种方法使用代码重复，所以还有另一种方法叫做 Array.map()

Array.map()

此功能用于以简单的方式显示列表中的数据。这种方式提供了简单的可读性和可理解性。

语法 – Array.map(name => {name})

例如，

import React from 'react';      
function EmployeeList(){    
      const employee = ['abc','xyz'];    
         
      return(    
          <div> {employee.map(emp => <h2>{emp}</h2>)} </div>    
       )    
}    
export default EmployeeList;

上述示例的输出将相同

现在这也可以通过在变量中存储数组列表来规范化，
import React from 'react';      
function EmployeeList(){    
       const employee = ['abc','xyz'];    
       const employeeList = employee.map(emp => <h2>{emp}</h2>);    
         
      return(    
             <div>{employeeList}</div>    
       )    
}      
export default EmployeeList;

输出将与上面相同，但代码提供了更好的可读性。

上面的代码是简单的概念，只有 1 个列表项。现在我们将看到在每个具有多个值的数组中具有键值对的数组的复杂示例。

例如：

import React from 'react';    
function EmployeeList(){    
       const employee = [{    
            name:'abc',    
            salary:'50$',    
            position:'Jr. Developer'    
       },{    
            name:'xyz',    
            salary:'100$',    
            position:'Sr. Developer'    
       },{    
            name:'mno',    
            salary:'150$',    
            position:'Project Manager'    
       }    
     ];    
    
      const employeeList = employee.map(emp => <h2>My name is    {emp.name} working as {emp.position} and having salary {emp.salary}     </h2>);    
         
       return(    
            <div>    
                        {employeeList}    
            </div>    
       )    
}      
export default EmployeeList;

输出将显示为，

现在让我们谈谈将数组概念移动到子组件并在主组件中调用该组件。

创建一个具有返回 html 函数的子组件：

import React from 'react';    
function Employees({emp}){    
       return(    
       <div>    
              <h2>My name is {emp.name} working as {emp.position} and having salary {emp.salary} </h2>    
       </div>    
       )    
}    
export default Employees;
现在在父组件中导入这个组件
import React from 'react';    
import Employees from './Employees';    
function EmployeeList(){    
        const employee = [{    
              name:'abc',    
              salary:'50$',    
              position:'Jr. Developer'    
          },{    
              name:'xyz',    
              salary:'100$',    
              position:'Sr. Developer'    
          },{    
              name:'mno',    
              salary:'150$',    
              position:'Project Manager'    
          }    
       ];    
     
        const employeeList = employee.map(emp =>    
              <Employees emp={emp}></Employees>    
              );    
              return <div>{employeeList}</div>;    
}    
export default EmployeeList;

上述输出将显示如下

现在查看浏览器中的控制台，其中存在与键相关的错误：

它将显示与key相关的警告，因为列表中的每个子元素都应该有一个唯一的key 属性。可以通过定义使用 JSX 生成的每个列表项的键来解决此错误。对于任何列表项，定义的键不应相同。现在和前面的例子一样，将 key 属性添加到 EmployeeList 组件中，

import React from 'react';    
import Employees from './Employees';    
function EmployeeList(){    
         const employee = [{    
                  id:1,    
                  name:'abc',    
                  salary:'50$',    
                  position:'Jr. Developer'    
            },{    
                  id:2,    
                  name:'xyz',    
                  salary:'100$',    
                  position:'Sr. Developer'    
           },{    
                  id:3,    
                  name:'mno',    
                  salary:'150$',    
                  position:'Project Manager'    
         }    
      ];    
         const employeeList = employee.map(emp => <Employees key= {emp.id} emp={emp}></Employees>);    
         return <div>{employeeList}</div>;     
     }    
    
export default EmployeeList;

现在，在浏览器中检查结果。

现在我们可以看到控制台中没有警告。key prop 可以包含列表中我们知道是唯一的任何内容。

使用key prop时需要牢记的重点是key prop不能在子组件中使用，例如，如果我们从Employee组件中的EmployeeList组件访问key prop，

import React from 'react';      
function Employees({emp,key}){    
       return(    
              <div>    
                     <h2>{key} My name is {emp.name} working as {emp.position} and having salary {emp.salary} </h2>    
              </div>    
       )    
}    
export default Employees;

输出将显示如下，

控制台本身的警告表明当从父组件传递到子组件时 key 未定义。现在重要的一点是我们为什么需要关键属性。key属性用于标识该key上的项目列表，并从列表中附加、删除或插入列表项目。Key prop 的重要性，

  • Key prop 有助于轻松识别添加、更新或删除的项目。
  • Key prop 有助于有效地更新用户界面。
  • Key为元素提供稳定的身份。

现在让我们更进一步，看看如果我们有一个没有任何属性名称的简单数组，例如 id ，

const cities = ['surat','vadodara','mumbai'];    
const cityList = cities.map(city => <h2 key={city}>{city}</h2>);    
return <div>{cityList}</div>;

输出将显示如下

现在，keys是根据列表的值定义的。现在，如果数组中的值具有重复值，那么它会发出警告，要求keys是唯一的。

更新列表：

const cities = ['surat','vadodara','mumbai','surat'];

输出将如下所示

所以在这种情况下，我们应该使用索引作为数组值的键。map 函数接受 2 个参数，map(value,index)。

例如，

const cities = ['surat','vadodara','mumbai','surat'];    
const cityList = cities.map((city,index) => <h2 key={index}>{city}</h2>);    
return <div>{cityList}</div>;

现在输出将显示如下，没有警告，

在 React 中，索引从 0 开始，如下所示，
const cities = ['surat','vadodara','mumbai','surat'];    
const cityList = cities.map((city,index) => <h2 key={index}>{index} {city}</h2>);    
return <div>{cityList}</div>;

将索引定义为key 后，输出将显示如下，

什么时候应该使用索引作为key？

始终使用索引作为key 是无效的，因为它可能会导致 UI 问题。因此，以下是应将索引用作key 的要点：

  • 列表中的项目没有唯一的 ID。
  • 该列表是静态的，不会改变。
  • 该列表不会过滤或排序。

当列表满足所有上述 3 个条件时，索引可以用作列表中的key 。

结论

在这篇文章中，我们学习了 React 应用中的 Conditional Rendering 和 List 渲染，以及我们有多少种方式可以使用 Array.Map() 来显示列表数据。在下一篇文章中，我们将了解 React 中的样式和 CSS 基础用法，并介绍表单概念。

本系列的下一个 >> React 中的样式和 CSS


慕源网 » React js教程：React 中的条件渲染和列表渲染（8）

常见问题FAQ

程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
慕源网

慕源网 普通

分享到：

发表评论

相关推荐

开通VIP 享更多特权，建议使用QQ登录
账号登录/注册
QQ登录
微博登录