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()方法通过对调用数组中的每个元素调用提供的函数来创建新数组。

英特尔AI工具

英特尔AI与机器学习解决方案

下载

例：

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视频教程》