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

Posted mrsaver

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React:快速上手——列表渲染相关的知识,希望对你有一定的参考价值。

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:快速上手——列表渲染的主要内容,如果未能解决你的问题,请参考以下文章

React Native快速上手

React 片段中的文本

[react] Module not found: Can't resolve 'schedule' in 'C:Usersadcaldvmtn7myapp (代码片段

在 React 中渲染 Relay 现代片段

无废话快速上手React路由

无废话快速上手React路由