• 技术文章 >web前端 >前端问答

    react遍历方法有哪些

    青灯夜游青灯夜游2021-11-25 14:02:22原创63

    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) =>  
        <li>{myList}</li>  
      );  
      return (  
        <div>  
              <h2>React Map例子</h2>  
                  <ul>{listItems}</ul>  
        </div>  
      );  
    }  
    const myLists = ['A', 'B', 'C', 'D', 'D'];   
    ReactDOM.render(  
      <NameList myLists={myLists} />,  
      document.getElementById('app')  
    );  
    export default App;

    2. 用键遍历列表元素。

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

    推荐学习:《react视频教程

    以上就是react遍历方法有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:react 遍历方法
    上一篇:react中flux是什么意思 下一篇:react16和react17有什么区别
    php中文网线上培训班

    相关文章推荐

    • react和vuejs有什么区别• react跟javascript有什么区别• Vue3中 ref VS reactive,浅谈它们间有何区别?• vuejs和React是什么• react-scripts是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网