提示：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. Flex 页面空白或Error ＃2032

    日前用flex.arcgis做了一个地图显示的页面,本机调试没题目,公布后放到用户办事器上(win2003,ie6)ie6显示页面空白,换搜狗浏览器显示Error #2032,只显示进度条,客户端用i ...

  2. MongoDB介绍及安装

    一.介绍: 1.NoSql(非关系型的数据库)成了一个极其热门的新领域,非关系数据库产品的发展非常迅速.MongoDB是NoSql的其中一种较为热门的非关系型数据库.查阅很多资料.其他博客和网站,借着 ...

  3. HighchartsJS创建环形带标识的图表实例

    HighchartsJS 是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库,目前最新版本库是Highcharts 4.1.9.另外,HighchartsJS还提供很多的插件和第三 ...

  4. sqlmap用户手册详解(转)

    http://url/sqlmap/mysql/get_int.php?id=1 当给sqlmap这么一个url的时候,它会: 1.判断可注入的参数 2.判断可以用那种SQL注入技术来注入 3.识别出 ...

  5. Jackson转换对象为json的时候报java.lang.stackoverflowerror

    无论在将一个对象转为json字符串的时候采用何种算法,如果你的对象的属性的类型不是基本类型或对应的引用类型,转换应该都不会就此结束,那么有一种方式可以导致这种转换陷入无限循环:将某个对象的属性设为对象 ...

  6. Java可读取操作系统的配置

    /** * Java获取操作系统的配置环境 * @throws Exception */ @Test public void testPro() throws Exception { Properti ...

  7. BizTalk 开发系列(三十九) BizTalk Server 2009技术概览

    BizTalk Server 2009已经发布一段时间了,之前Beta版发布的时候也写过一篇文章<BizTalk Server 2009 Beta初体验>, 当时比较了2006 R2与20 ...

  8. Java Web（转）

    struts2+spring+hibernate 上传文件 关 键字: s2sh 上传文件 struts2 spring hibernate 前段时间,我用struts2.1.6.spring2.5. ...

  9. java常用工具类

    http://www.cnblogs.com/langtianya/p/3875124.html

  10. 50分钟学会Laravel 50个小技巧

    50分钟学会Laravel 50个小技巧 时间 2015-12-09 17:13:45  Yuansir-web菜鸟 原文  http://www.yuansir-web.com/2015/12/09 ...