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

<!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 Fir = React.createClass({

            render:function(){

                return(

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

                    <div>

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

                        <input type="text" name="" />

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

                    </div>

                );

            }

        });

        var obj = {

            user: '夺命雷公狗',

            sendname :'留言'

        }

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

            document.getElementById('demo'),

            function(){

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

        });

    </script>

</body>

</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. iOS开发中几个重要的方法

    iOS开发中几个重要的方法: 加载类到内存,程序刚启动的时候调用,调用在main函数之前 1.+(void)load{ } 初始化类,类第一次使用的时候调用一次 2.+(void)initialize ...

  2. linux下获取本机IP

    转载:http://blog.chinaunix.net/uid-20593763-id-1620213.html 源代码级Unix/Linux 通用网卡IP地址获取方法 在Unix和Linux系统下 ...

  3. oracle 连接查询，和（+）符号的用法

    --连接查询 左链接.右链接,全链接 --内链接select e.account 用户名, e.empname 名称, c.comname 公司名称  from employee e inner jo ...

  4. Lamp下安全配置随笔

    Apache方面: 1.apache有两个指令可以输出服务器的细节,即ServerSignature和ServerTokens. 当这两个指令一起使用时,会输出apache的版本号,php的版本号,i ...

  5. Spring中的单例一二

    Spring框架很好的帮助我们创建和管理dao.bean.service.action等对象, 但是它创建的对象是单例呢还是多例,又有哪些区别以及为什么 1.在Spring中默认创建的是单例模式,简单 ...

  6. Greenplum各种Tips(不定时更新)

    Greenplum接触也有一段时间了,在使用过程中积累了一些命令,在此分享给大家. 1. 查看segment是否有切换(没有记录则没有切换) SELECT * from gp_segment_conf ...

  7. 20145334赵文豪 《Java程序设计》第3周学习总结

    20145334赵文豪 <Java程序设计>第3周学习总结 教材学习内容总结 下面的是代码托管的截图 第四章学习内容总结 4.1 类与对象 1.对象(Object): 存在的具体实体,具有 ...

  8. 重新启动 Apache 以加载上面安装的模块

    尽管Ubuntu 是一种新兴的Linux分支,但Ubuntu 组织却为Apache提供了丰富的支持软件,这些软件都可以从发行版的光盘获取,也可以从官方站点轻松下载.所以,Ubuntu非常适合作为Web ...

  9. PNG格式的图像文件，创建的图像的MIME类型的头部

    在安装完这三个组件后,还需要重新配置一次PHP,这也是你对采用DSO方式安装PHP感到庆幸的地方之一.运行make clean,然后在当前的配置中添加下面的内容: --with-gd=[/path/t ...

  10. 【转】Gvim开发环境配置笔记--Windows篇

    配置文件(vimrc) set nocompatible set nu! set cursorline colorscheme murphy " vim 自身命令行模式智能补全 set wi ...