提示：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. OpenSceneGraph学习笔记

    VirtualPlanetBuilder编译方法 转自:http://www.boyunjian.com/do/article/snapshot.do?uid=7327932418831703800 ...

  2. DataGridView 的单元格的边框、 网格线样式的设定【转】

    1) DataGridView 的边框线样式的设定DataGridView 的边框线的样式是通过 DataGridView.BorderStyle 属性来设定的. BorderStyle 属性设定值是 ...

  3. 索引器、哈希表Hashtabl、字典Dictionary(转)

    一.索引器 索引器类似于属性,不同之处在于它们的get访问器采用参数.要声明类或结构上的索引器,使用this关键字. 示例:   索引器示例代码 /// <summary> /// 存储星 ...

  4. Find a way——L

    L. Find a way Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave N ...

  5. c++ 符号执行顺序小例子

    if ( a[i] == b[i] && ++i < 0)  这个表达式的执行顺序 1. ; )// 输出 True cout<<"True"&l ...

  6. hdu Sudoku Killer

    简单的dfs,主要就是每个?处填的值是否满足条件的判断.这道题感觉考察的是输出格式的控制. #include"iostream" #include"stdio.h&quo ...

  7. 使用Fiddler截断更改Request数据

    0x01 Fiddler介绍 Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据.(百度百科) 0x ...

  8. zendFream 中的用到了Ajax（其中有搜索）分页

    最近在用ZendFreamwork开发一个后台,其中用到了分页,ZendFreamwork自带的分页挺好用的,可是我其中用到了Ajax的局部刷新,在加上一些搜索条件,所以分页有点无头绪了.下面我来介绍 ...

  9. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  10. linux下mysql的忘记root密码的解决办法

    因为放寒假家里没有宽带,便很少上网,前几天用手机进入自己的个人博客时竟然返回数据库不能连接的错误,吓我一跳,网站肯定被人黑了,但转头一想我的博客就几篇破文章,谁这么无聊要黑,我并没有立刻去网上找解决的 ...