提示：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. 李洪强iOS经典面试题133--UNIX常用命令

    可能碰到的iOS笔试面试题(3)--UNIX常用命令 做开发说用不到命令行,那肯定是不可能的.所以记住几个常用的命令还是很有用. cd 改变工作目录 pwd 输出当前工作目录的绝对路径在UNIX中要执 ...

  2. [LintCode] Longest Increasing Continuous Subsequence 最长连续递增子序列

    Give an integer array,find the longest increasing continuous subsequence in this array. An increasin ...

  3. Linux_系统管理命令(工作中经常使用到的)

    查看网络配置信息 ifconfig 查看系统资源信息(类似win系统资源管理器) top (ps: load average 负载 Task 进程   Cpus/Mem  swap 交换分区 类似wi ...

  4. ThinkPHP的URL优化

    在刚刚安装好tp框架时,我们的路径一般是这样的: http://localhost/index.php/Home/Index/index?name=cly 我们可以通过下面一步步的步骤来优化这个路径 ...

  5. css限制div字符超出部分，简单有方便

    text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-w ...

  6. HTTP协议 (二) 基本认证

    HTTP协议 (二) 基本认证 http协议是无状态的, 浏览器和web服务器之间可以通过cookie来身份识别. 桌面应用程序(比如新浪桌面客户端, skydrive客户端)跟Web服务器之间是如何 ...

  7. SRM 588 DIV1

    250 题意:有n首不同的曲子,你唱每首曲子需要花费a的时间以及一个调整的时间b,调整的时间为此首歌的曲调减去上一首歌的曲调的绝对值. 思路:我们用dp[i][k]表示前i首歌只唱k首用的最小时间花费 ...

  8. C#_项目做成安装包

    首先打开项目-->点开解决方案右键单击添加-->新建项目-->找到其他项目类型(如下图)--> 点击确定-->单击应用程序文件夹-->在名称下的空白处单击--> ...

  9. generator自动生成mybatis配置和类信息

    generator自动生成mybatis的xml配置.model.map等信息: 1.下载mybatis-generator-core-1.3.2.jar包.        网址:http://cod ...

  10. Trie树

    一.什么是trie树 1.Trie树 (特例结构树)   Trie树,又称单词查找树.字典树,是一种树形结构,是一种哈希树的变种,是一种用于快速检索的多叉树结构.典型应用是用于统计和排序大量的字符串( ...