React:快速上手——列表渲染

Posted 2021-02-04 mrsaver

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]

实例代码

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>
          )
      }
  }