React列表渲染的三种常见方式

1.循环数组采用map方法

render() { 

 let imgarr=["https://t7.baidu.com/it/u=656449836,1405112256&fm=193",
            "https://t7.baidu.com/it/u=4203437985,3172522485&fm=193",
            "https://t9.baidu.com/it/u=2200618372,2799649385&fm=193"]

}
 return (
            <div>
               {imgarr.map((el,index)=>{
                    return <img src={el} key={index} style=                            
                           {{width:"200px",height:"200px"}}/>
                })} 
</div>
)

2.遍历对象使用map方法

render() {  
      let objarr={name:"fiona",age:"18"}
}
return (
<div>
    {    
        {/* Object.keys(objarr)一个给定对象的自身可枚举属性组成的数组 */}
        Object.keys(objarr).map((el,index)=>{
                return <p key={index} >{el}:{objarr[el]}</p>
       })} 
</div>
)

3.遍历对象数组使用forEach方法

render(){
       let list=[
            {
              name:"百度",
              address:"http://www.baidu.com"
            },
            {
              name:"google",
              address:"http://www.google.cn"
            },
            {
              name:"firefox",
              address:"https://home.firefoxchina.cn"
            }
          ];
     const elements=[];
}
return (
<div>
  {list.forEach((item,index)=>{
                    elements.push(
                        <div key={index}>
                        {item.name}:<a>{item.address}</a>
                        <hr/>
                        </div>
                    )
                })}
   {elements}
</div>
)