<!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. C#委托详解（3）：委托的实现方式大全（续）

    接上篇(C#委托详解(2):实现方式大全),本篇继续介绍委托的实现方式. 4.Action<T>和Func<T>委托 使用委托时,除了为每个参数和返回类型定义一个新委托类型之外 ...

  3. 1564: [NOI2009]二叉查找树 - BZOJ

    Description Input Output只有一个数字,即你所能得到的整棵树的访问代价与额外修改代价之和的最小值.Sample Input4 101 2 3 41 2 3 41 2 3 4Sam ...

  4. 项目开发-->身份认证及用户登录模块

    1.首先明确的两个问题 如何判断当前申请是由一个已登录用户发起的?如果Request.IsAuthenticated为true,则表示是一个已登录用户. 如何获取当前登录用户的登录名?如果是一个已登录 ...

  5. 剑指offer--面试题21

    题目:设计包含min函数的栈,pop(),push(),min()的时间复杂度均为O(1) 自己所写代码如下:(写‘栈’的代码还是有些不熟练!) #include <iostream> u ...

  6. 使用JFinal-weixin配置微信开发

    先扯点闲话,申请好公众号后,一直因为没有域名.没有外网IP而没有尝试过开发微信服务.后来发现nat123可以从内网直接映射到外网,但是nat123需要钱或者T币大于0,于是为了赚一个T币,签到灌水了一 ...

  7. 扫描二维码跳转app

    1.判断是否安装了app <html> <head> <meta name="viewport" content="width=device ...

  8. 一个奇怪的网络故障 默认网关为0.0.0.0（Windows）

    用IPCONFIG命令看到的情况是这样: Windows IP 配置 以太网适配器 本地连接 : 连接特定的 DNS 后缀 . . . . . . . : 本地链接 IPv6 地址. . . . . ...

  9. OpenLayers3 online build

    openlayers3使用了一个比较复杂的build工具,从github上下载下来的代码中并没有build之后的版本,要配置build环境又比较繁琐,好在官方的example中提供了在线的版本,下面就 ...

  10. Openstack os-networks API create network 方法

    官方文档在请求方法和地址上有错误: http://api.openstack.org/api-ref.html#ext-os-networks 正确的地址为: /v2/{tenant_id}/os-n ...