<!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) 定义一个使用动画的更多相关文章

  1. React(0.13) 定义一个checked组件

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  2. React(0.13) 定义一个多选的组件

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  3. React(0.13) 定义一个动态的组件(属性)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  4. React(0.13) 定义一个input组件，使其输入的值转为大写

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  5. React(0.13) 定义一个动态的组件(注释，样式)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  6. React(0.13) 定义一个动态的组件(函数作为动态的值)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  7. React(0.13) 定义一个动态的组件

    1.因为jsx将两个花括号之间的内容渲染为动态值,只需要引用对应的变量即可 <!DOCTYPE html> <html> <head> <title>R ...

  8. React(0.13) 组件的组合使用

    <html> <head> <title>组件的组合调用</title> <script src="build_0.13/react.m ...

  9. React(0.13) 利用componentDidMount 方法设置一个定时器

    <html> <head> <title>hello world React.js</title> <script src="build ...

随机推荐

  1. Eclipse Maven项目报错3之找不到配置文件spring-servlet-context.xml

    一.具体错误如下图所示 根据文字提示可以看出是这个文件找不到,但是我去项目的这个目录找了,这个文件确实存在,那么是什么问题呢 二.解决问题 原因分析(来自网上) 代码编译的过程,是一个自动生成相应编译 ...

  2. python性能还是不错的

    一个未优化的程序,跑了四天,字典长度有15万条,每条40个字段,跑得还算不错. 刚刚优化后的: 等运行两天后再看看效果...

  3. ESXI安装时卡在loading ipmi_si_drv的解决方案

    参考:http://x220ak.hatenablog.com/ 在这个界面按下shift+O,输入runweasel noipmiEnabled即可跳过loading ipmi_si_drv的加载

  4. 发布web应用程序是出现unsafe code

    找到了解决办法 解决方法参照: https://stackoverflow.com/questions/16567197/publish-web-application-with-unsafe-cod ...

  5. jquery easyui tree异步加载子节点

    easyui中的树可以从标记中建立,也可以通过指定一个URL属性读取数据建立.如果想建立一棵异步树,需要为每个节点指定一个id属性值,这样在加载数据时会自动向后台传递id参数. <ul id=& ...

  6. 牛客网-《剑指offer》-用两个栈实现队列

    题目:http://www.nowcoder.com/practice/54275ddae22f475981afa2244dd448c6 C++ class Solution { public: vo ...

  7. 使用Jmeter对API进行性能测试

    先补充刚才测试的部分截图余下,后续详细补充内容. API Test.jmx 如下: <?xml version="1.0" encoding="UTF-8" ...

  8. C#中使用多款LevelDB.Net封装测试性能

    一.使用http://www.nuget.org/packages/LevelDB.NET 测试 1.新建项目,并Nuget引入库: 2.写代码 using LevelDB; using System ...

  9. C++ 第八课 标准c字符和字符串

    atof() 将字符串转换成浮点数 atoi() 将字符串转换成整数 atol() 将字符串转换成长整型数 isalnum() 当字母或数字字符时, 返回真值 isalpha() 当字母字符时, 返回 ...

  10. C#实现U盘检查，并写入文件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...