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

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