提示：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. IE6、7绝对定位层被遮挡的原因（主要是父层决定的）

    最近做项目,经常遇到IE7以下浏览器中.一些悬浮框被一些元素遮挡的问题,这些元素一般都是设置了position的.问题的根本在不是被设置绝对定位的元素上,而是在设置了相对定位的父元素上.   我查阅了 ...

  2. getPos封装

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. HDU1058 DP

    Humble Numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  4. WOFF mime类型

    WOFF fonts,国外网站很多调用了.woff字体文件,IIS默认不支持,所以会报错404,只需要添加扩展MIME类型mime类型是:application/x-font-woff.

  5. SQL Server 2008 下载及安装教程

    sql server 2008 是微软公司开发的一套数据库管理系统.是目前大型数据库中常用数据库之一.性能稳定,功能强大,是面向中大型企业的一款数据库解决方案.我们安装SqlServer2008的时候 ...

  6. window svn backup.bat

    help command /? call /? %cd% 可以用在批处理文件中,也可以用在命令行中:展开后,是驱动器盘符:+当前目录,如在dos窗口中进入c:\dir目录下面, %0代指批处理文件自身 ...

  7. jquery 温故而知新 animate动画的一些坑

    注意1,只有hover事件后才能紧跟着第二个回调函数(mouseleave),尽量还是不使用mouseover事件了 注意2,.stop(false,true); 结束动画,在动画队列中删除自己,并且 ...

  8. python 语料处理（从文件夹中读取文件夹中文件，分词，去停用词，去单个字）

    # -*- coding:utf8 -*- import os import jieba def splitSentence(inputFile): fin = open(inputFile, 'r' ...

  9. BizTalk开发系列(二十六) 使用Web Service

    Web Service是在构建SOA平台中广泛使用的技术.在BizTalk开发过程中使用SOAP适配器接收和发送 Web Services 请求.业务流程可以发布为 Web Services 并使用外 ...

  10. Android课程---Android 如何用滑杆(SeekBar)组件设置图片颜色的透明度(转)

    Android系统支持的颜色是由4个值组成的,前3个为RGB,也就是我们常说的三原色(红.绿.蓝),最后一个值是A,也就是Alpha.这4个值都在0~255之间.颜色值越小,表示该颜色越淡,颜色值越大 ...