在我们处理数据时,假如我们现在有一个用户列表存放到数组中
const users = [
{ username: 'Jerry', age: 21, gender: 'male' },
{ username: 'Tomy', age: 22, gender: 'male' },
{ username: 'Lily', age: 19, gender: 'female' },
{ username: 'Lucy', age: 20, gender: 'female' }
]
现在想要将数组里面的数据渲染到我们的页面上时需要怎么做呢,在之前读react的小书时表达式中插入{}里面可以存放任何数据,如果我们将jsx里面塞入一个数组,这个数组里面放了一些jsx的元素可以看到会正常显示
那么将数组对象存放到我们的{}中
const users = [
{ username: 'Jerry', age: 21, gender: 'male' },
{ username: 'Tomy', age: 22, gender: 'male' },
{ username: 'Lily', age: 19, gender: 'female' },
{ username: 'Lucy', age: 20, gender: 'female' }
]
class Index extends Component {
render () {
const usersElements = [] // 保存每个用户渲染以后 JSX 的数组
for (let user of users) {
usersElements.push( // 循环每个用户,构建 JSX,push 到数组中
<div>
<div>姓名:{user.username}</div>
<div>年龄:{user.age}</div>
<div>性别:{user.gender}</div>
<hr />
</div>
)
}
return (
<div>{usersElements}</div>
)
}
}
ReactDOM.render(
<Index />,
document.getElementById('root')
)
就可以进行如下的处理
通过for of语句来进行遍历,将我们的jsx进行罗列渲染
但是在一般情况下不会手动来写循环来构建jsx的结构,一般会用es6中自带的map属性,
const users = [
{ username: 'Jerry', age: 21, gender: 'male' },
{ username: 'Tomy', age: 22, gender: 'male' },
{ username: 'Lily', age: 19, gender: 'female' },
{ username: 'Lucy', age: 20, gender: 'female' }
]
class User extends Component {
render () {
const { user } = this.props
return (
<div>
<div>姓名:{user.username}</div>
<div>年龄:{user.age}</div>
<div>性别:{user.gender}</div>
<hr />
</div>
)
}
}
class Index extends Component {
render () {
return (
<div>
{users.map((user) => <User user={user} />)}
</div>
)
}
}
ReactDOM.render(
<Index />,
document.getElementById('root')
)
这里通过在render中来进行map遍历调用user组件,在user组件中来进行属性的调用
在我们的列表渲染中我们需要给react一个key来理解我们的列表,需要对元素来进行唯一的标识