一、

二、代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>Hello, World</title>

 </head>

 <body>

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

     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>

     <script type="text/jsx">

         var style = {

             color: "red",

             border: "1px #000 solid",

         };

         var HelloWorld = React.createClass({

             render: function () {

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

             },

         });

         var HelloUniverse = React.createClass({

             getInitialState: function () {

                 return {

                     name: 'Tim',

                 };

             },

             handleChange: function (event) {

                 this.setState({name: event.target.value});

             },

             render: function () {

                 return <div>

                 <HelloWorld name={this.state.name}></HelloWorld>

                 <br/>

                 <input type="text" onChange={this.handleChange} />

                 </div>

             },

         });

         React.render(<div style={style}><HelloUniverse></HelloUniverse></div>, document.body);

     </script>

 </body>

 </html>

React状态的含义和用法的更多相关文章

  1. 转: ES6异步编程: co函数库的含义与用法

    转: ES6异步编程: co函数库的含义与用法 co 函数库是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具,用于 Generator 函数的自动执行. 比如,有一个 Ge ...

  2. UML类图中箭头和线条的含义和用法

    UML类图中箭头和线条的含义和用法 在学习UML过程中,你经常会遇到UML类图关系,这里就向大家介绍一下UML箭头.线条代表的意义,相信通过本文的介绍你对UML中箭头.线条的意义有更明确的认识. AD ...

  3. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

  4. 借鉴redux，实现一个react状态管理方案

    react状态管理方案有很多,其中最简单的最常用的是redux. redux实现 redux做状态管理,是利用reducer和action实现的state的更新. 如果想要用redux,需要几个步骤 ...

  5. http 状态码含义

    HTTP状态码被分为五大类, 目前我们使用的HTTP协议版本是1.1, 支持以下的状态码.随着协议的发展,HTTP规范中会定义更多的状态码. 小技巧: 假如你看到一个状态码518, 你并不知道具体51 ...

  6. 转: ES6异步编程:Thunk函数的含义与用法

    转: ES6异步编程:Thunk函数的含义与用法 参数的求值策略 Thunk函数早在上个世纪60年代就诞生了. 那时,编程语言刚刚起步,计算机学家还在研究,编译器怎么写比较好.一个争论的焦点是&quo ...

  7. 转: ES6异步编程:Generator 函数的含义与用法

    转: ES6异步编程:Generator 函数的含义与用法 异步编程对 JavaScript 语言太重要.JavaScript 只有一根线程,如果没有异步编程,根本没法用,非卡死不可. 以前,异步编程 ...

  8. LODOP获取打印机状态码和状态码含义测试

    由于打印机千差万别,打印机执行的标准也不一样,LODOP获取的打印状态码也可能不同,安装了个打印机驱动实际测试一下,测试的打印机驱动是Brother Color Type3 Class Driver. ...

  9. Delphi maskedit控件的掩码含义及用法方法

    Delphi maskedit控件的掩码含义及用法方法   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2 ...

随机推荐

  1. Qt：禁止qDebug的输出

    Qt:禁止qDebug的输出 在工程的.pro文件里加上以下编译批令即可: DEFINES += QT_NO_DEBUG_OUTPUT

  2. 立即执行函数(IIFE)的理解与运用

    作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从 ...

  3. 字符串比较 忽略大小写 iphone

    //不考虑大小写比较字符串1 NSString *astring01 = @"this is a String!"; NSString *astring02 = @"Th ...

  4. QTP与Selenium的比较

    1.用户仿真:Selenium在浏览器后台执行,它通过修改HTML的DOM(文档对象模型)来执行操作,实际上是通过javascript来控制的.执行时窗口可以最小化,可以在同一机器执行多个测试.QTP ...

  5. Careercup - Google面试题 - 5634470967246848

    2014-05-06 07:11 题目链接 原题: Find a shortest path ,) to (N,N), assume is destination, use memorization ...

  6. JS-中对表单处理

    一.表单的基本介绍 1. HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是HTMLFormElement 类型. HTMLFormElemen ...

  7. shell编程之重定向

    标准输入,输出和错误---------------------------------文件文件                描述符---------------------------------输 ...

  8. 设计模式之工厂模式(Factory)

    设计模式的工厂模式一共有三种:简单工厂模式,工厂模式,抽象工厂模式 简单工厂模式原理:只有一个工厂类,通过传参的形式确定所创建的产品对象种类 代码如下: #include <stdio.h> ...

  9. Leetcode#115 Distinct Subsequences

    原题地址 转化为求非重路径数问题,用动态规划求解,这种方法还挺常见的 举个例子,S="aabb",T="ab".构造如下地图("."表示空位 ...

  10. ios 流媒体 资料

    (1)“Real-Time Streaming Protocol (RTSP)”比较官方的资料(链接). (2)“ffmpeg”在百度百科的简介(链接). (3)“ffmpeg”的官网:http:// ...