React JSX中的循环：深入研究基础知识-DEV365 开发者社区

循环在编程中很重要，因为它们可以在缩短长行代码的同时在几秒钟内执行操作。在此博客中，我们将学习React JSX中循环的基础知识以及它们实际上是如何使用的。

什么是JSX？

JSX只是JavaScript语法扩展名，代表XML JavaScript。我们可以在JavaScript代码中直接编写HTML代码。它比常规JavaScript快，因为它在转换为常规JavaScript时执行优化。

示例JSX代码

const handleButton = () => {
   alert('Hello, Welcome to Loop Tutorial')
}

return(
   <div>
     <button onClick={() => handleButton()} title="submit">Click Me</button>
   </div>
)

如何在React JSX中渲染循环？

JSX中的循环提供了一种一遍又一遍地做某事的快速简便方法。为了解决这个问题，我们将查看5种用于渲染React JSX中元素的循环。

地图

您可以使用map方法在对象上迭代。您可以使用此方法重复渲染相同的组件。让我们以一个例子理解。

import React from 'react'

const App = () => {
   const users = ['Rahul', 'Shivam', 'Ayesha', 'Akash', 'Poonam'];

   return(
     <div>
       <ul>
         <li>
           { users.map((names, i) => {
             return(
               <li key={i}>{names}</li>
             )
           })}
         </li>
       </ul>
     </div>
   )
}

export defaultApp;

为了

用户可以使用标准for循环来创建元素。在这里，您应该使用length函数来提供循环的最后一点。

import React from 'react'

const App = () => {
   const users = [
     { id: 1, Name: 'Rahul' },
     { id: 2, Name: 'Shivam' },
     { id: 3, Name: 'Ayesha' },
     { id: 4, Name: 'Akash' },
     { id: 5, Name: 'Poonam' }
   ];

   const displayUser = (users) => {
     let name = [];
     for (let i = 0; i < users.length; i++) {
       name.push(<li key={users[i].id}>{users[i].Name}</li>);
     }
     return name;
   }

   return(
     <div>
       <ul>
         {displayUser(users)}
       </ul>
     </div>
   )
}

export default App;

foreach

forEach方法用于在每个数组元素上运行一个函数。

import React from 'react'

const App = () => {
   const users = [
     { id: 1, Name: 'Rahul' },
     { id: 2, Name: 'Shivam' },
     { id: 3, Name: 'Ayesha' },
     { id: 4, Name: 'Akash' },
     { id: 5, Name: 'Poonam' }
   ];

   const name = [];

   users.forEach((user) => {
     name.push(<li key={user.id}>{user.Name}</li>);
   });

   return(
     <div>