React:快速上手(3)——列表渲染
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:快速上手(6)——掌握React Router
React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...
- React:快速上手(5)——掌握Redux(2)
React:快速上手(5)——掌握Redux(2) 本文部分内容参考阮一峰的Redux教程. React-Redux原理 React-Redux运行机制 我觉得这张图清楚地描述React-Redux的 ...
- React:快速上手(1)——基础知识
React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...
- 官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...
- React:快速上手(7)——使用中间件实现异步操作
React:快速上手(7)——使用中间件实现异步操作 本文参考链接:Stack Overflow redux-thunk 我们使用store.dispath进行派发时,只能传递一个普通对象进去,如下: ...
- React:快速上手(4)——掌握Redux(1)
React:快速上手(4)——掌握Redux 引入Redux 混乱的state管理 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状 ...
- React:快速上手(2)——组件通信
React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...
- React:快速上手(8)——前后端分离的跨域访问与会话保持
React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...
- 03 基于umi搭建React快速开发框架(封装列表增删改查)
前言 大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢. 这样我们就可以有更多的时间学习一些新的东西.我们这套框 ...
随机推荐
- display:flex和display:box布局浏览器兼容性分析
display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...
- iframe宽高百分百显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MySQL Migration Toolkit启动报jre错误
正常启动的话,会报出“an error occurred during the initialization of the runtime system.Please make sure you ha ...
- 请写出5种常见到的runtime exception。
请写出5种常见到的runtime exception. 解答: NullPointerException:当操作一个空引用时会出现此错误. NumberFormatException:数据格式转换出现 ...
- HSV和HSI区别
HSV (色相hue, 饱和度saturation, 明度value), 也称HSB (B指brightness) 是艺术家们常用的,因为与加法减法混色的术语相比,使用色相,饱和度等概念描述色彩更自然 ...
- 笔记:C语言图形基本函数及实例五子棋游戏
初始化图形界面 int gdriver; int gmode; gdriver = DETECT; initgraph(&gdriver,&gmode,"" ); ...
- UIImagePickerController在UIPopoverController中 旋屏问题
1弧度=180/π度1度=π/180弧度今天遇到了 一个问题.UIImagePickerController在UIPopoverController中 旋屏问题. 在查找了许多资料后方知,此乃iOS系 ...
- android 127.0.0.1/localhost connection refused,在模拟器上应该用10.0.2.2访问你的电脑本机
调试中通过android simulator模拟器链接localhost或者127.0.0.1,因为我在电脑上面建立了apache,我的代码大概就是URL url = new URL(urlStrin ...
- poj 2923(状态压缩+背包)
比较巧妙的一道题目,拿到题目就想用暴力直接搜索,仔细分析了下发现复杂度达到了2^n*n! ,明显不行,于是只好往背包上想. 于是又想二分找次数判断可行的方法,但是发现复杂度10^8还是很悬... 然后 ...
- prometheus配置
本文主要记录下测试环境积累的prometheus配置信息,主要是k8s基本节点的配置和cadvisor的配置,方便以后使用做为参考 global: scrape_interval: 30s scrap ...