数据渲染
在JSX中的{ }中放入数组的时候会自动渲染
let arr = [
{ username: 'Circle', age: 21},
{ username: 'Tim', age: 22 },
]
列表渲染
let usersElements = []
for (let user of arr)
{
usersElements.push(
<div>
<div>姓名：{user.username}</div>
<div>年龄：{user.age}</div>
<hr/>
</div>
)
}
return (
<div>{usersElements}</div>
)
Map遍历
return (
<div>
{arr.map((user)=>{
return (
<div>
<div>姓名：{user.username}</div>
<div>性别：{user.age}</div>
<hr />
</div>
)
})}
</div>
)
Map遍历组件
/* 单个文件 */
class User extends Component {
render(){
let {user} = this.props
return (
<div>
<div>姓名：{user.username}</div>
<div>年龄:{user.age}</div>
<hr />
</div>
)}
}
class Index extends Component{
render()
{
return (
<div>
{arr.map((user) => <User user={user} />)}
</div>
)}
}
