React(0.13) 定义一个使用动画
<!DOCTYPE html>
<html>
<head>
<title>React JS</title>
<script src="../build_0.13/react.js"></script>
<script src="../build_0.13/JSXTransformer.js"></script>
<script src="../build_0.13/react-with-addons.min.js"></script>
<style type="text/css">
.example-enter{color:red;}
.example-active{color:green;}
</style>
</head>
<body>
<div id="example" ></div>
<script type="text/jsx">
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems = this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1);
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}> {item} </div> );
}.bind(this));
return ( <div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName="example">
{items}
</ReactCSSTransitionGroup>
</div> );
}
}); //将组件加到对应的元素上
React.render( <TodoList />, document.getElementById('example') );
</script>
</body>
</html>
React(0.13) 定义一个使用动画的更多相关文章
- React(0.13) 定义一个checked组件
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个多选的组件
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(属性)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个input组件，使其输入的值转为大写
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(注释，样式)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件(函数作为动态的值)
<!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...
- React(0.13) 定义一个动态的组件
1.因为jsx将两个花括号之间的内容渲染为动态值,只需要引用对应的变量即可 <!DOCTYPE html> <html> <head> <title>R ...
- React(0.13) 组件的组合使用
<html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...
- React(0.13) 利用componentDidMount 方法设置一个定时器
<html> <head> <title>hello world React.js</title> <script src="build ...
随机推荐
- 使用unbound在RHEL7上搭建DNS服务
1.概念:DNS (Domain Name Server)域名解析服务,使用TCP&UDP的53号端口(主从DNS之间用TCP,客户端查询使用UDP).它可以完成域名与IP地址的互换,可以通过 ...
- （转）【风宇冲】Unity3D教程宝典之AssetBundles:第一讲
自:http://blog.sina.com.cn/s/blog_471132920101gz8z.html 原创文章如需转载请注明:转载自风宇冲Unity3D教程学院 ...
- AOP在大规模软件开发项目中的应用(图)
AOP在大规模软件开发项目中的应用(图) 本文的写作源于一个真实的大型软件开发项目,我们努力尝试在这个项目中推广应用AOP.在此我们将对曾经面临过的一些实际问题与困难进行分析,试图引发关于面向方面软件 ...
- MATLAB 制作GIF图像
前提要求:图像集保存在某个文件夹中,且每个图像以数字形式顺序命名,如001.jpg,002.jpg等. 代码1: 这个代码生成的效果有点问题,建议采用代码2. wm={'overwrite','app ...
- 通过Fiddler抓取Java HttpClient的HTTP包
设置HttpClient访问Fiddler的代理即可. public static void main(String[] args) throws Exception { HttpPost httpP ...
- JAVA的PreparedStatement和addBatch()方法
本文介绍两个内容,为什么使用PreparedStatement的addBatch()方法?以及使用PreparedStatement的好处. 一.addBatch使用方法 昨天用JAVA做了一个导表的 ...
- UBUNTU 字符界面来回切换
图形界面切换到字符界面: 实体机:Ctrl + Alt + F1 VMware虚拟机:按下ALT+CTRL+SPACE(空格),ALT+CTRL不松开,再按F1.这样就可以切换到字符界面 字符界面切换 ...
- Linux（CentOS6.X）安装mysql
首先执行rpm -qa|grep -i mysql检查一下是否已经安装过mysql mysql-libs-5.1.73-5.el6_6.x86_64 可见已经安装了库文件,应该先卸载,不然会出现覆盖错 ...
- 从0開始写MyScrollView
从0開始写MyScrollView 上篇文章对ScrollView的详细实现进行了分析.本文依据上篇分析的结果.自己动手写一个ScrollView. step1 尾随手指滑动,非常easy.重写2个函 ...
- oracle列自增实现(1)-Sequence+Trigger实现Oracle列自增
Sequence+Trigger实现Oracle列自增 序列的语法格式为: CREATE SEQUENCE 序列名 [INCREMENT BY n] [START WITH n] [{MAXVALUE ...