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 ...
随机推荐
- R-向量
- C#.NET常见问题(FAQ)-如何把定义存放类实例的数组
数组存放的可以是普通的int,double,string类型,也可以是自定义的类的实例 如果数组长度未知,可以用list对象存放 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: h ...
- 在linux下makefile的使用
在linux下makefile的使用
- 高仿美团主界面<一>
声明:本demo还未完好,正在持续更新中... 先上图吧: 这个小demo资源图片全是用青花瓷抠出来的,如今仅仅是完毕了 一部分. 会持续更行中. . .有兴趣的朋友能够关注我,我们一起coding, ...
- DWR组件——基于远程过程调用实现Ajax
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6686115.html 一:DWR的用途 DWR(Direct Web Remoting)是一个Web远程调用 ...
- nginx 和php设置上传大小及可以提交的内容限制
1. 以下代码加入 /etc/nginx/nginx.conf 文件中的 http{ ... } 块中 client_max_body_size 8M; 2. PHP 设置上传大小 打开 /etc/p ...
- 【shell】数据文件分割
有时候我们必须把数据文件分割为更小的文件,这样方便我们邮件发送或者查看文件内容.split命令则可以用来分割文件. 一.根据大小来分割文件 1.一般分割 例如:现在有文件tmp.log,大小为:368 ...
- 转 configure: error: Cannot find ldap.h
检查下面是不是已经安装,如果没有安装之:检查:yum list openldapyum list openldap-devel安装 :yum install openldap yum install ...
- VB按字节截取字符串
内容绝大部分来自互联网,出处请百度. 全角半角皆适用 Public Function bSubstring(ByVal s As String, ByVal length As Integer) As ...
- Jmeter-maven-plugin高级配置之选择测试脚本(转)
Posted on 2014 年 6 月 6 日 在pom.xml文件中可以指定运行哪些jmx脚本. 运行所有的测试脚本 Jmeter默认运行${project.base.directory}/src ...