提示：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="留言" />

                    </div>

                );

            }

        });

        var user = '夺命雷公狗';

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

            document.getElementById('demo'),

            function(){

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

        });

    </script>

</body>

</html>

夺命雷公狗-----React---4--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---5--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. Maven_非法字符: '\ufeff' 解决方案

    Idea在maven打包时报非法字符: '\ufeff' ,但打开报错的类看没有问题,后来发现是隐蔽字符BOM的问题,解决办法是用Notepad++打开这个类,然后改变编码格式为UTF-8  无DOM ...

  2. python 之Twsited

    Twisted是一个事件驱动的网络框架,其中包含了诸多功能,例如网络协议,线程,数据库管理,网络操作,电子邮件等 事件驱动 一,注册事件 二,触发事件 自定义事件框架  event_fram.py # ...

  3. pthread_creat()解析及需注意的地方

    函数声明 int pthread_create(pthread_t*restrict tidp,const pthread_attr_t *restrict_attr,void*(*start_rtn ...

  4. [zt]OpenCV2.1.0的安装

    下载和安装 OpenCV 2.1.0 2.添加库文件:打开VS 2008,选择菜单:Tools->options->Projects and Solutions >VC++ Dire ...

  5. 解决Odoo日期(时间)无效的问题 [转]

    环境Server: Ubuntu Kylin 14 + GreenOdoo-7.0-linux64, GreenOdoo-8.0-linux64客户端: winXP+firefox 31 (类似问题发 ...

  6. do some projects in macine learning using python

    i want to do some projects in macine learning using python help me in this context I don't know if y ...

  7. css中的一些兼容问题

    浏览器兼容 为什么会有兼容问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正 ...

  8. 科技来电：不容错过的win10轻度美化攻略

    作为微软不择手段采用弹框.限时.警告等方式强推win10的结果, win10市场占有率大增,微软高兴了,可用户苦了,吹洗剪+杀马特般的metro&传统混血开始菜单.鼻青脸肿般的任务栏.单一颜色 ...

  9. Python数据类型（3）

    字符串(str):单引号''.双引号""嵌套使用,可以不使用转义字符:'abc"dd"ef'."acc'd'12",字符串不可以是多行的三单 ...

  10. node js 模块分类

    核心模块 require('fs'); 核心模块是被编译成二进制代码 文件模块 require('../fs.js'); 对于加载模块时既没指出./ ../ /.../时,加载模块的搜索路径.如果'/ ...