props：组建初始要渲染的数据，他是不可以改变的

state：组建状态发生改变，调用render重新渲染数据

我们来写一个例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="./js/react.js"></script>

    <script src="./js/react-dom.js"></script>

    <script src="./js/browser.min.js"></script>

</head>

<body>

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

    <script type="text/babel">

        //定义一个组建，名字第一个必须是大写

        var Firs = React.createClass({

            /*组建的状态*/

            getInitialState:function(){

                return{

                    mes:this.props.value

                }

            },

            render:function(){

                return(

                    //必须要有一个大标签包围着才可以

                    <div>

                        <h1>Hello {this.props.user}</h1>

                        <input type="text" name="" value={this.state.mes} onChange={this.changeHandle} />

                        <input type="button" value={this.props.sendname} />

                        <p>{this.state.mes}</p>

                    </div>

                );

            },

            changeHandle:function(ev){

                //console.log(ev.target.value);

                this.setState({mes:ev.target.value});

            }

        });

        var obj = {

            user: '夺命雷公狗',

            sendname :'留言',

            values : '请输入留言的信息'

        }

        ReactDOM.render(<Firs {...obj} />, /*这里其实也可以使用双标签的如：<Fir></Fir>  */

            document.getElementById('demo'),

            function(){

                alert('页面渲染完成');

        });

    </script>

</body>

</html>

效果如下所示：

夺命雷公狗-----React---7--组建的状态props和state的更多相关文章

  1. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  4. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  6. 夺命雷公狗-----React---4--props变量的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. 夺命雷公狗-----React---3--标签的规则

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 夺命雷公狗-----React---2--组建

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

随机推荐

  1. JavaScript声明全局变量的三种方式

    JavaScript声明全局变量的三种方式   JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...

  2. Curl参数一览

    * 目录 1. 介绍 2. curl扩展的安装 3. curl_init 4. curl_setopt 5. curl_exec 6. curl_close 7. curl_version * 介绍 ...

  3. jquery控制文字内容溢出用点点点(…)省略号表示

    jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(“.text”).each(function(){ var maxwidth=23; if($(this).text( ...

  4. QTabWidget 使用方法

    QTabWidget是Qt中的标签类,由于可切换到标签存在,大大的提高了软件可容纳的控件的数量,通过增加标签,我们几乎有用之不尽的空间,那么我们来看看这个类的一些基本用法: 声明控件: QTabWid ...

  5. getPos,offsetTop

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. c#语句 随堂练习1

    1.请输入两个整数a,b,若a²+b²>100,则打印出a²+b²的结果,否则打印出a+b的结果. 2.有一组函数,y=x(x<1),y=2x-1(1<=x<10),y=3x- ...

  7. eclipse.ini

    -startup plugins/org.eclipse.equinox.launcher_1..jar --launcher.library plugins/org.eclipse.equinox. ...

  8. DateFormatUtil.java

    package com.vcredit.framework.utils; import java.sql.Timestamp;import java.text.DateFormat;import ja ...

  9. 故障处理-ORA-00376/ORA-01110

    数据库实例启动之后发现,9号数据文件发生故障,file 9 cannot be read at this time, ORACLE Instance ilndb2 (pid = 16) - Error ...

  10. https加密解密过程详解

    要点: https协议对传输内容进行加密,具有更强的安全性,防止被抓包后解析出请求内容. https是建立在ssl之上的http协议. 服务器支持https协议必须安装一套数字证书,所谓数字证书就是一 ...