<!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. Get file extention in XSLT

      When working with data view web parts or data form web parts in SharePoint, you might want to use ...

  2. Bossies 2015: The Best of Open Source Software Awards

    InfoWorld editors and contributors pick the top open source software for data centers, clouds, devel ...

  3. JavaScript：如何获得 Private、Privileged、Public 和 Static 成员（属性和方法）【翻译+整理】

    本文内容 背景 把我们的对象放在一起 添加一个私有(Private)的属性 添加一个特权(Privileged)的方法 添加一个公共(Public)的属性和方法 添加一个静态(Static)的属性 我 ...

  4. MySQL数据库设置远程访问权限方法小结

    http://www.jb51.net/article/42441.htm MySQL基础知识第一期,如何远程访问MySQL数据库设置权限方法总结,讨论访问单个数据库,全部数据库,指定用户访问,设置访 ...

  5. Office办公 如何设置WPS的默认背景大小

    设计-页面设置,然后修改宽度和高度   因为我们只是需要背景跟平面差不多大(不同屏幕比如宽屏的就比较长),修改宽度和高度的时候注意文字之类的也会被拉伸缩放,所以自己改了之后看效果,比如我100,50的 ...

  6. JavaScript如何根据当天算出前三天和后三天

    经杨秀徐批准 中央军委颁发意见建设新型司令机关news 杨秀徐会见到北京述职的香港特首梁振英news 海军372潜艇官兵先进事迹报告会举行 杨秀徐作指示news 中央农村工作会议在京召开 李克强作重要 ...

  7. Ubuntu IntelliJ IDEA 注冊碼與Gradle相關

    一.Ubuntu IntelliJ IDEA 注冊碼 在线免费生成IntelliJ IDEA 15.0(16.+)注册码 注冊參考:https://www.iteblog.com/idea/ 依次选择 ...

  8. Go语言中使用SQLite数据库

    Go语言中使用SQLite数据库 1.驱动 Go支持sqlite的驱动也比较多,但是好多都是不支持database/sql接口的 https://github.com/mattn/go-sqlite3 ...

  9. js 判断是否是空对象

    主要思路 我们要考虑到的主要有:js原生对象,宿主对象(浏览器上面的). 首先对于宿主对象 主要判断是DOM 对象 和是否是window 对象 是否是DOM对象  value.nodeType 是否存 ...

  10. 解决 Out of range value adjusted for column 'ID' at row 1

    MySQL升级到5.0.17后,在执行sql语句INSERT INTO `news` (`ID`, `Title`, `Content`) VALUES ('', '标题', '正文');时出现错误: ...