React遍历数组的2种方式foreach和map

背景:

需要将数组的数据全部展现出来。

详细代码

import React from "react";

let family =[ 
    {
      name:"爷爷",
      age:"80"
    },
    {
      name:"爸爸",
      age:"50"
    },
    {
      name:"小明",
      age:"30"
    },
    {
        name:"孙子",
        age:"7"
      }
  ];


class Test extends React.Component{
    constructor(props){
        super(props);
        this.comp={
            userInfo:["Test","Demo1","G1"],
            list:[
                {title:"hello"},
                {title:"hi"},
                {title:"你好"}
                ]
        }       
    }

render(){
    //第一种遍历方式循环遍历数组  map方式
    let result = this.comp.userInfo.map(function(value,key){
        return <li key={key}>{value}</li>
        })

    //第二种遍历方式循环遍历数组  foreach方式
   const arrays=[];
   family.forEach((item)=>{
    arrays.push(
      <div>
        {item.name}&nbsp;
        <a>{item.age}岁</a>
        <hr/>
      </div>
      )
      });
   
    return(
        <div>         
            <h1>这是一个Test组件</h1>            
            <hr></hr>
            {/* 第一种遍历方式循环遍历数组 */}
            <ul>
                {result}
            </ul>
             {/* 第一种遍历方式循环遍历数组   简写法 */}
            <ul>
              {
                this.comp.list.map(function(value,key){
                 return (<li key={key}>{value.title} </li>);
                })
              }
            </ul>
            <hr></hr>  
             {/* 第二种遍历方式循环遍历数组  */}
             <br />          
             {arrays}
        </div>        
    )
}
}
export default Test;

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值