react有哪些遍历方法

这篇文章主要讲解了"react有哪些遍历方法"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"react有哪些遍历方法"吧！

react遍历方法有：1、使用foreach()方法，语法"list.forEach((item)=>{...});"；2、使用map()方法，语法"list.map((item, index)=>{...});"。

本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。

react采用forEach或map两种遍历方式

1、foreach（推荐）

  list.forEach((item)=>{      });

例：

dataSource.forEach((item) => {     const est = item.estimateAmount === null ? 0 : parseFloat(item.estimateAmount);     const gmv = item.estimateGmv === null ? 0 : parseFloat(item.estimateGmv);     allCountBudget += est;     allCountGmv += gmv;     // allCountGmv = parseFloat(allCountGmv) + parseFloat(gmv);   });

2、map

list.map((item, index)=>{});

在React里map方法用于遍历和显示组件的类似对象列表，map不是React特有的，相反，它是可以在任何数组上调用的标准JavaScript函数。map()方法通过对调用数组中的每个元素调用提供的函数来创建新数组。

例：

var numbers = [1, 2, 3, 4, 5];   const doubleValue = numbers.map((number)=>{       return (number * 2);   });   console.log(doubleValue);

在React中，map()方法用于:

1、遍历列表元素。

import React from 'react';   import ReactDOM from 'react-dom';     function NameList(props) {    const myLists = props.myLists;    const listItems = myLists.map((myList) =>      
{myList}
    );    return (      
            
React Map例子
                
{listItems}
      
    );  }  const myLists = ['A', 'B', 'C', 'D', 'D'];   ReactDOM.render(    ,    document.getElementById('app')  );  export default App;

2. 用键遍历列表元素。

import React from 'react';   import ReactDOM from 'react-dom';     function ListItem(props) {    return 
{props.value}
;  }    function NumberList(props) {    const numbers = props.numbers;    const listItems = numbers.map((number) =>          );    return (      
        
React Map例子
            
 {listItems} 
      
    );  }    const numbers = [1, 2, 3, 4, 5];  ReactDOM.render(    ,    document.getElementById('app')  );  export default App;

感谢各位的阅读，以上就是"react有哪些遍历方法"的内容了，经过本文的学习后，相信大家对react有哪些遍历方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！