背景:
需要将数组的数据全部展现出来。
详细代码
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}
<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;