<!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 {...obj} />, /*这里其实也可以使用双标签的如：<Fir></Fir>  */

            document.getElementById('demo'),

            function(){

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

        });

    </script>

</body>

</html>

看下效果：

这样他还饱了个错，那么我们来用双向绑定的方式来进行解决掉他。。。。

<!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="" value={this.props.values} onChange={this.changeHandle} />

                        <input type="button" value={this.props.sendname} />

                    </div>

                );

            },

            changeHandle:function(){

            }

        });

        var obj = {

            user: '夺命雷公狗',

            sendname :'留言',

            values : '请输入留言的信息'

        }

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

            document.getElementById('demo'),

            function(){

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

        });

    </script>

</body>

</html>

然后再去看看。。。

没报错了。。。。

夺命雷公狗-----React---6--props多属性的传递的更多相关文章

  1. 夺命雷公狗-----React---17--事件常用的属性

    我们可以通过打印的方式将他打印出来看看,如下所示: <!DOCTYPE> <html> <head> <meta charset="utf-8&qu ...

  2. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  3. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  4. 夺命雷公狗-----React---11--添加css样式的方法

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  5. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  6. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  7. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. 夺命雷公狗-----React---4--props变量的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. ArcGIS 设置地图显示范围大小（全屏显示）

    Arcmap的FullExtent默认是地图加载的时候的extent.其实这个fullExtent是可以设置的. 打开ArcMap,选择左边图例的Layers ,右键点击,选择“Properties. ...

  2. 纪念逝去的岁月——C/C++冒泡排序

    冒泡排序 代码 #include <stdio.h> void printList(int iList[], int iLen) { ; ; i < iLen; i++) { pri ...

  3. Linux查看操作系统时间

    date命令的功能是显示和设置系统日期和时间. 该命令的一般格式为: date [选项] 显示时间格式(以+开头,后面接格式) date 设置时间格式 命令中各选项的含义分别为: -d datestr ...

  4. [CareerCup] 15.7 Student Grade 学生成绩

    15.7 Imagine a simple database storing information for students' grades. Design what this database m ...

  5. hdu N皇后问题

    此题是很基本的dfs的题目 ,但是要打表,否则会超时. 这题的思路就是从第一行一直放到第n行,因此行方面的判断就可以省略了.因此只要判断列方面和斜线方面是否满足条件,列方面用一个vis数组来记录是否已 ...

  6. HTML - 毛玻璃 滤镜 模糊

    css 秘密花园 http://dabblet.com/gist/d9f243ddd7dbffa341a4 场景,背景图片 + 毛玻璃遮盖 原理:利用background的cover特性,将毛玻璃的区 ...

  7. 网页mp3播放代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 安装好php后，配置httpd以便支持php3脚本

    Apache是目前应用最广的Web服务器,PHP是一种类似ASP的易学的脚本语言,而且性能和功能都比ASP要强,而MySQL又是一个Linux上应用最多的数据库系统,特别是用于网站建设,这3个软件均是 ...

  9. windows下vim 块模式问题

    VIM: gvim 使用 Ctrl+V 發表於 2005 年 10 月 27 日 由 Tsung vim 要做垂直選取的動作, 就要使用 "Ctrl + v", 但是 gvim 會 ...

  10. C#构造Http 破解学校教务系统学生账号密码

    背景介绍 我们学校的教务系统的是以学生学号作为登陆账号,初始密码是自己的生日. 一点点想法 每次期末查成绩的时候,我都会有一个想法,要是我能跑到系统后台,把自己的成绩修改一下,那该时间多么舒坦的事情啊 ...