提示：props的值是不可以改变的...

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="./js/react.js"></script>
  7.     <script src="./js/react-dom.js"></script>
  8.     <script src="./js/browser.min.js"></script>
  9. </head>
  10. <body>
  11.     <div id="demo"></div>
  12.     <script type="text/babel">
  13.         //定义一个组建，名字第一个必须是大写
  14.         var Fir = React.createClass({
  15.             render:function(){
  16.                 return(
  17.                     //必须要有一个大标签包围着才可以
  18.                     <div>
  19.                         <h1>Hello {this.props.user}</h1>
  20.                         <input type="text" name="" />
  21.                         <input type="button" value={this.props.sendname} />
  22.                     </div>
  23.                 );
  24.             }
  25.         });
  26.  
  27.         var obj = {
  28.             user: '夺命雷公狗',
  29.             sendname :'留言'
  30.         }
  31.  
  32.         ReactDOM.render(<Fir user={obj.user} sendname={obj.sendname} />, /*这里其实也可以使用双标签的如：<Fir></Fir>  */
  33.             document.getElementById('demo'),
  34.             function(){
  35.                 alert('页面渲染完成');
  36.         });
  37.     </script>
  38. </body>
  39. </html>

夺命雷公狗-----React---5--props对象的传递的更多相关文章

  1. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

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

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

  3. 夺命雷公狗-----React---11--添加css样式的方法

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 简短总结一下C#里跨线程更新UI（转）

    摘自: http://my.oschina.net/sdqxcxh/blog/53707 跨线程更新UI是写多线程程序尤其是通信类的程序经常遇到的问题,这里面主要的问题是冲突,比如数据线程想要更新UI ...

  2. ArcGIS初步 系列视频教程

    本人才疏学浅,但鉴于较少的ArcGIS10以上版本的学习视频,所以利用业余时间做了这么个业余的视频系列教程,本随笔提供在线观看地址与720P原版下载地址. 1认识ArcGIS 优酷在线地址  (优酷清 ...

  3. 1071. Speech Patterns (25)

    People often have a preference among synonyms of the same word. For example, some may prefer "t ...

  4. Learn ZYNQ (3)

    移植android3.3到ZedBoard follow doc:Android移植Guide1.3.pdf follow website: http://elinux.org/Zedboard_An ...

  5. Android课程---Android Studio简单设置

    Android Studio 简单设置 界面设置 默认的 Android Studio 为灰色界面,可以选择使用炫酷的黑色界面.Settings-->Appearance-->Theme, ...

  6. php使用 memcache 来存储 session 方法总结

    设置session用memcache来存储 方法I: 在 php.ini 中全局设置 session.save_handler = memcache session.save_path = " ...

  7. Mysql5.5命令行修改密码

    今天下载了mysql5.5.45免安装版,配置好之后发现mysql默认是没有设置密码的,也就是密码为空. 如果是本机作开发测试用,有无密码倒也无所谓,不过发布在服务器上没有密码肯定是不行的,那就需要设 ...

  8. HDU 4358 Boring counting（莫队+DFS序+离散化）

    Boring counting Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 98304/98304 K (Java/Others) ...

  9. javascript:正则大全

    :replace函数,为写自己的js模板做准备 待完善 function 1,声明&用法 //数组: var arr=[];//字面量 var arr=new Array();//构造函数 / ...

  10. angularJs模糊查询

    html代码 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <tit ...