<!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. chrome中打开 swf下载的问题

    https://helpx.adobe.com/cn/flash-player/kb/enabling-flash-player-chrome.html 1. 在地址栏中,键入 chrome://se ...

  2. springside

    springside安装:http://www.oschina.net/question/582149_75623 1 安装maven,配置环境变量2 下载springside4 https://gi ...

  3. 从n个数中随机选取m个

    咋一看,这是个很简单的问题,但是如果n是个不确定的数呢?比如服务器每天会收到数以亿计的请求,但是目前服务器端不希望保存所有的请求,只想随机保存这些请求中的m个.试设计一种算法,能够使服务器实时保存m个 ...

  4. reStructuredText - 一个比MarkDown更好用的标记语言

    文档和教程 http://docutils.sourceforge.net/rst.html http://zh-sphinx-doc.readthedocs.io/en/latest/rest.ht ...

  5. C++库研究笔记--用__attribute__((deprecated)) 管理过时代码

    用__attribute__((deprecated)) 管理过时代码.同一时候保留兼容的接口 Linux下: #define DEPR_AFTER __attribute__((deprecated ...

  6. resultType、resultMap

    resultType: 作用: 将查询结果按照sql列名pojo属性名一致性映射到pojo中. 场合: 常见一些明细记录的展示,比如用户购买商品明细,将关联查询信息全部展示在页面时,此时可直接使用re ...

  7. Mybatis-Generator自动生成XML文件以及接口和实体类

    整合了MySQL和Oracle配置文件生成方法 这个是整个文件夹的下载地址:http://www.codepeople.cn/download 主要给大家介绍一下generatorConfig.xml ...

  8. 《跟孩子学Python》

    1:Python对象之间的赋值是内容赋值而不是引用赋值 a = ["aaa","bbb","ccc"] b = a print a prin ...

  9. java 判断String字符串是不是json数据

      java 判断String字符串是不是json数据 CreationTime--2018年8月24日18点23分 Author:Marydon JSONObject jo = null; try ...

  10. 8、java5线程池之动态缓存线程池newCachedThreadPool

    JDK文档描述 创建一个可根据需要创建新线程的线程池,但是在以前构造的线程可用时将重用它们.对于执行很多短期异步任务的程序而言,这些线程池通常可提高程序性能.调用 execute 将重用以前构造的线程 ...