<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="../../build/react-with-addons.js"></script>

    <script src="../../build/JSXTransformer.js"></script>

</head>

<body>

    <div id="demo"></div>

    <hr>

    <div id="app"></div>

    <div id="likeBtn"></div>

    <script type="text/jsx">

        /** @jsx React.DOM */

        var HelloMessage = React.createClass({

            render: function () {

                return <div>Hello, {this.props.name}</div>;

            }

        });

        React.renderComponent(<HelloMessage name="Jack"/>, document.getElementById('demo'));

    </script>

    <script type="text/jsx">

        /** @jsx React.DOM */

        var App = React.createClass({

            componentDidMount: function () {

                console.log(this.props.children);

            },

            render: function () {

                return <div><span></span></div>

            }

        });

        React.renderComponent(<App></App>, document.getElementById('app'));

    </script>

    <script type="text/jsx">

        /** @jsx React.DOM */

        var LikeButton = React.createClass({

            getInitialState: function () {

                return {

                    liked: false

                };

            },

            handleClick: function (event) {

                this.setState({

                    liked: !this.state.liked

                });

            },

            handleMouseEnter: function () {

                console.log(this);

            },

            render: function () {

                var text = this.state.liked ? 'like' : 'unlike';

                return (

                    <p onClick= {this.handleClick} >

                        You {text} Click to toggle

                    </p>

                );

            }

        });

        React.renderComponent(<LikeButton />, document.getElementById('likeBtn'));

    </script>

</body>

</html>

React getInitialState desc的更多相关文章

  1. React学习小结（三）

    一.React数据的传输 1.属性和状态是react中数据传递的载体 2.属性是声明以后不允许被修改的东西 3.属性只能在组件初始化的时候声明并传入组件内部,并且在组件内部通过this.props获取 ...

  2. 使用scss + react + webpack + es6实现幻灯片

    写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程 ...

  3. react中，constructor和getInitialState的区别

    1,ES6语法 使用class声明一个类,且要继承react组件的方法和属性的时候 : 在里面我们可以直接指定 this.state = { }, 我们可以当前组件内任何地方使用 this.setSt ...

  4. React的getDefaultProps和getInitialState

    getDefaultProps 不是获取默认props,而是设置默认props,主要用在ES5的React写法中getInitialState 不是获取默认State,而是设置初始的state,主要是 ...

  5. Node.js建站笔记-使用react和react-router取代Backbone

    斟酌之后,决定在<嗨猫>项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现. react拥有丰富的组件,虽然不如Back ...

  6. 初探React与D3的结合-或许是visualization的新突破？

    自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...

  7. [React]全自动数据表格组件——BodeGrid

    表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路:   新增和编辑 想想我们最开始写新增 ...

  8. 介绍一项让 React 可以与 Vue 抗衡的技术

    好吧,我承认我是标题党.React 明明如日中天,把它与 Vue 倒过来,给 Vue 加点东西或可与 React 抗衡.不过,这两年 Vue 干的正是这事,不断加东西,不断优化,按它现有发展速度超越 ...

  9. React 可视化开发工具 shadow-widget 的非可视开发方法

    Shadow Widget 提倡在可视设计器中开发用户界面,输出转义标签,而非 JSX.许多童鞋可能不知道 SW 同样支持用 JSX 设计界面,开发体验比原生 React 编程好出很多,本文就介绍这方 ...

随机推荐

  1. Socket的双网卡收发（C#）

    最近的一个项目中需要同时使用两块网卡收发UDP组播数据包,并且要求使用Socket的方式接收和发送网络数据包(我不会告诉你们我之前是直接使用SharpPcap来实现的).在C#中Socket接触的比较 ...

  2. valueOf跟toString区别

    1.用法如下:toString()方法:返回对象的字符串表示. 对象 操作 Array 将 Array 的元素转换为字符串.结果字符串由逗号分隔,且连接起来. Boolean 如果 Boolean 值 ...

  3. hibernate---ID生成策略

    5.1.4.1. Generator 可选的<generator>子元素是一个Java类的名字, 用来为该持久化类的实例生成唯一的标识.如果这个生成器实例需要某些配置值或者初始化参数, 用 ...

  4. IIS OCIEnvCreate failed with return code -1

    现象:windows server2008服务器,MVC使用NHiberate连接Oracle11g,程序部署到IIS后无法访问数据库,抛上述异常:在服务器上安装VS调试可以访问数据库 解决方法:连接 ...

  5. ELF文件格式

    ELF--Linux下可执行文件格式   1.类型          常见的ELF格式文件包括:                                                     ...

  6. 【BZOJ】【1520】【POI2006】Szk-Schools

    网络流/费用流 比较裸的一道题 依旧是二分图模型,由源点S连向每个学校 i (1,0),「注意是连向第 i 所学校,不是连向学校的标号m[i]……唉这里WA了一次」 然后对于每所学校 i 连接 j+n ...

  7. Leetcode#128 Longest Consecutive Sequence

    原题地址 1. 把所有元素都塞到集合里2. 遍历所有元素,对于每个元素,如果集合里没有,就算了,如果有的话,就向左向右拓展,找到最长的连续范围,同时在每次找的时候都把找到的删掉.这样做保证了同样的连续 ...

  8. C51关键字

    C51 中的关键字 关键字 用途 说明 auto 存储种类说明 用以说明局部变量,缺省值为此 break 程序语句 退出最内层循环 case 程序语句 Switch语句中的选择项 char 数据类型说 ...

  9. ［翻译］The Neophyte's Guide to Scala Part 12: Type Classes

    The Neophyte's Guide to Scala Part 12: Type Classes 过去的两周我们讨论了一些使我们保持DRY和灵活性的函数式编程技术,特别是函数组合,partial ...

  10. 本地安装xssing

    本地安装xssing 环境为apache+mysql+php,linux下和Windows均进行了尝试. 步骤: (1)Mysql中创建xing数据库,将xssing.sql中的语句复制并在xing数 ...