React状态的含义和用法

时间：2022-08-29 17:43:27

一、

React状态的含义和用法

二、代码

 <!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. 转&colon; ES6异步编程&colon; 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. 转&colon; ES6异步编程&colon;Thunk函数的含义与用法

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

  7. 转&colon; ES6异步编程&colon;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. AssetBundle系列——资源的加载、简易的资源管理器

    每个需要进行资源管理的类都继承自IAssetManager,该类维护它所使用到的所有资源的一个资源列表.并且每个资源管理类可以重写其资源引用接口和解引用接口. 每个管理器有自己的管理策略,比如Scen ...

  2. BZOJ 3620&colon; 似乎在梦中见过的样子 &lbrack;KMP 暴力&rsqb;

    和我签订契约,成为魔法少女吧 题意:求所有形似于A+B+A 的子串的数量 , 且len(A)>=k,len(B)>=1 位置不同其他性质相同的子串算不同子串,位置相同但拆分不同的子串算同一 ...

  3. Spring使用&commat;Scheduled定时调度

    一.spring配置文件中增加对这个注解的支持: 配置文件如下: <?xml version="1.0" encoding="UTF-8"?> &l ...

  4. Docker入门-docker-compose使用&lpar;二&rpar;

    Docker  Docker容器大行其道,直接通过 docker pull + 启动参数的方式运行比较麻烦, 可以通过docker-compose插件快速创建容器 1.安装docker-compose ...

  5. laravel 比较好的资料地址 看云

    https://www.kancloud.cn/curder/laravel/408497

  6. 超详细的Java时间工具类

    package com.td.util; import java.sql.Timestamp; import java.text.ParseException; import java.text.Pa ...

  7. Java复习1-基本数据类型

    数据类型 整形 type 存储 取值范围 int 4字节 -2 147 483 648 ~ 2 147 483 647 (超过20亿) short 2字节 -32 768 ~ 32 7677 long ...

  8. Tornado模板转义处理

    转自:http://www.qttc.net/201305320.html tornado默认是转义所有字符,比较安全,但有时候我们的确需要把字符当做html来解析处理,因此我们需要做些处理. 示例: ...

  9. xshell如何让窗口并列排序

    如图所示:

  10. Android Studio编译的时候提示Gradle无法下载的解决方案

    首先,打开android studio项目 找到项目目录gradle\wrapper\gradle-wrapper.properties这个文件.内容如下:#Wed Apr 10 15:27:10 P ...

相关文章