<!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. Careercup - Microsoft面试题 - 6337018766295040

    2014-05-10 06:38 题目链接 原题: What do you think is the next big thing in technology? For example, search ...

  2. Google Guava学习笔记——基础工具类Splitter的使用

    另一项经常对字符串的操作就是根据指定的分隔符对字符串进行分隔.我们基本上会使用String.split方法: String testString = "Monday,Tuesday,,Thu ...

  3. Matlab验证公式取值范围

    一.问题来源 t = 2xy/(x+y);融合相似度和信任度,我需要验证值域是不是[0,1]: 二.求解 clear all; clc; %linspace(0:1,0.1)这样是错的,第三个参数是段 ...

  4. Leetcode#123 Best Time to Buy and Sell Stock III

    原题地址 最直观的想法就是划分成两个子问题,每个子问题变成了:求在某个范围内交易一次的最大利润 在只能交易一次的情况下,如何求一段时间内的最大利润?其实就是找股价最低的一天买进,然后在股价最高的一天卖 ...

  5. GameMap(类结构)(不断跟新)

    暂时有个疑问为什么这些需要这么复杂的继承

  6. Using Hooks

    The following code examples demonstrate how to perform the following tasks associated with hooks: In ...

  7. js实用功能

    //日期格式转换 Date.prototype.format = function (format) {     /*      * eg:format="yyyy-MM-dd hh:mm: ...

  8. Mac中安装maven3.2.1

    Mac中安装maven3.2.1 原文链接:http://blog.csdn.net/f_zongjian/article/details/24144803 本机OS X:10.9,未安装XCode, ...

  9. Unity3D 将 Unity 嵌入WPF中的一些研究笔记

     一. 在 WPF 中使用 WebBrowser,直接打开 WebPlayer.html 以这种方式有一个问题是. 无法在 WebBrowser 的上面 放置其它的控件, 在运行时,都不会显示 . 以 ...

  10. MVC模式在游戏开发的应用

    原地址: http://www.cocoachina.com/gamedev/2012/1129/5212.html MVC是三个单词的缩写,分别为:模型(Model).视图(View)和控制Cont ...