React:快速上手(3)——列表渲染

2023-08-24,,

React:快速上手(3)——列表渲染

使用map循环数组

了解一些ES6

  ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版。ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

详情查看菜鸟教程了解更多:http://www.runoob.com/w3cnote/es6-tutorial.html

Array.prototype.map()

  map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2); console.log(map1);
// expected output: Array [2, 8, 18, 32]

使用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 Index extends React.Component{
render(){
return(
<div>
{users.map((user)=>{
return(
<div>
<div>{user.username}</div>
<div>{user.age}</div>
<div>{user.gender}</div>
<hr/>
</div>
)
})}
</div>
)
}
}  

抽离对象优化代码

  我们可以将User单独抽取出来一个类,这样就不需要在Index里写太多的渲染代码,使得逻辑清晰一目了然。

 class Index extends React.Component{
render(){
return(
<div>
{users.map((user)=><User user={user}/>)}
</div>
)
}
} class User extends React.Component{
render(){
const{user} = this.props
return(
<div>
<div>姓名:{user.username}</div>
<div>年龄:{user.age}</div>
<div>性别:{user.gender}</div>
<hr />
</div>
)
}
}

  

React:快速上手(3)——列表渲染的相关教程结束。

《React:快速上手(3)——列表渲染.doc》

下载本文的Word格式文档,以方便收藏与打印。