reactjs入门到实战(三)---- 组件详解
owner 》》》 传递 props
this 》》》是默认指向组件本身
key》》》不能没有,在复用的情况下
组件:例子
<!--
输入:props & state
输出:html
--> var LikeButton = React.createClass({
getInitialState:function(){
return {liked: false};
}, handleClick:function(event){
this.setState({Liked: !this.state.liked});
}, render:function(){
var text = this.state.liked ? 'like' : 'haven\'t liked';
return(
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
}); ReactDOM.render(
<LikeButton />,document.getElementById('example')
)
复合组件:
》》》继承 小的继承大的
》》》组合 用小的东西组成的的东西。
<div id="example"></div>
<script type="text/babel">
//设置要混合的对象
var SetIntervalMixin = { componentWillMount:function(){
this.intervals = [];
}, setInterval:function(){
this.intervals.forEach(clearInterval);
}, componentWillUnmount:function(){
this.intervals.forEach(clearInterval);
}
}; //主要的组件
var TickTock = React.createClass({
mixins:[SetIntervalMixin],
getInitialState:function(){
return{seconds:};
},
componentDidMount:function(){
this.setInterval(this.tick,);
},
tick:function(){
this.setState({seconds:this.state.seconds+});
},
render:function(){
return(
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
}); ReactDOM.render(
<TickTock />,
document.getElementById('example')
); </script>
reactjs入门到实战(三)---- 组件详解的更多相关文章
- Asp.Net MVC3 简单入门第一季(三)详解Controller之Filter
前言 前面两篇写的比较简单,刚开始写这个系列的时候我面向的对象是刚开始接触Asp.Net MVC的朋友,所以写的尽量简单.所以写的没多少技术含量.把这些技术总结出来,然后一简单的方式让更多的人很好的接 ...
- Java web 入门知识 及HTTP协议详解
Java web 入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...
- 三张图片详解Asp.Net 全生命周期
用三张图片详解Asp.Net 全生命周期 下面我们使用三张图片解析ASP.net的整个生命周期,我总感觉使用图片更加的清楚的说明这种问题,所以使用的这样方式 说明: 1 第一张图片从全局说明从客户端 ...
- Android中Intent组件详解
Intent是不同组件之间相互通讯的纽带,封装了不同组件之间通讯的条件.Intent本身是定义为一个类别(Class),一个Intent对象表达一个目的(Goal)或期望(Expectation),叙 ...
- SVN与TortoiseSVN实战:补丁详解
硬广:<SVN与TortoiseSVN实战>系列已经写了五篇,第二篇<SVN与TortoiseSVN实战:标签与分支>和第三篇<SVN与TortoiseSVN实战:Tor ...
- Android笔记——四大组件详解与总结
android四大组件分别为activity.service.content provider.broadcast receiver. ------------------------------- ...
- SVN与TortoiseSVN实战:补丁详解(转)
硬广:<SVN与TortoiseSVN实战>系列已经写了五篇,第二篇<SVN与TortoiseSVN实战:标签与分支>和第三篇<SVN与TortoiseSVN实战:Tor ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- Echars 6大公共组件详解
Echars 六大组件详解 : title tooltip toolbox legend dataZoom visualMap 一.title标题详解 myTitleStyle = { color ...
- 【转】Zabbix 3.0 从入门到精通(zabbix使用详解)
[转]Zabbix 3.0 从入门到精通(zabbix使用详解) 第1章 zabbix监控 1.1 为什么要监控 在需要的时刻,提前提醒我们服务器出问题了 当出问题之后,可以找到问题的根源 网站/ ...
随机推荐
- thinphp讲解(三)——空操作、空控制器、跨控制器、命名空间
一.“空操作”本质意思:一个对象(控制器)调用本身不存在的操作方法 一般网站处于安全考虑不给用户提示任何错误信息 在tp里面控制器controller.class.php里有个_call()方法 所以 ...
- c++ 容器(list学习总结)
list是一个线性双向链表结构,它的数据由若干个节点构成,每一个节点都包括一个信息块(即实际存储的数据).一个前驱指针和一个后驱指针.它无需分配指定的内存大小且可以任意伸缩,这是因为它存储在非连续的内 ...
- x3270: PCOM的替代品
在Linux上登录Mainframe的利器,而且也是PCOM的免费版.原来没有仔细研究,今天花了一些时间学习,确实能满足基本的要求: x3270的Homepage 看一下Release Note, ...
- URL 中#号,? ,&的作用 (摘抄整理 链接为学习地址)
1. 一峰的网络日志:http://www.ruanyifeng.com/blog/2011/03/url_hash.html get: 1.页面滚动到指定页面的指定位置 (eg: http://ww ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- iOS使用静态变量
之前看"Effective Objective-C 2.0", 第4条, 多用静态变量, 少用define. 正好我的项目有些东西是静态变量, 之前java我习惯起一个类, 里面全 ...
- Java、JVM和操作系统之间的关系,写给新人,
来张图:这个帖子写给新人的,老玩家就直接无视他,因为这个完完全全是白话基础原理. 解释:上面的图是从上往下依次调用的关系. 操作系统(Windows/Linux)管理硬件,让硬件能够正常.合理的运行, ...
- 关于JDK,tomcat,MyEclipse的配置
1.下载安装JDK 在自定义安装路径时,jdk和之后的jre文件夹是属于平行结构,我的安装路径为:D:\jdk\jdk1.6.0_43和D:\jdk\jre6 然后是对环境变量的配置, 计算机→属性→ ...
- POSIX字符类
POSIX字符类需要用引号,或双括号[[]]括起来: [:alnum:]:匹配字面和数字字符.等同于A~Z,a~z,0~9 [:alpha:]:匹配字母字符.等同于A~Z,a~z [:blank:]: ...
- Quartz集群原理及配置应用
1.Quartz任务调度的基本实现原理 Quartz是OpenSymphony开源组织在任务调度领域的一个开源项目,完全基于Java实现.作为一个优秀的开源调度框架,Quartz具有以下特点: (1) ...