<!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. IOS 学习资料

    IOS学习资料 - 逆天整理 - 精华无密版[最新][精华] 无限互联3G学院 iOS开发视频教程UI 极客学院IOS iPhone 6的自适应布局

  2. java二叉树的实现和遍历

    /* * Java实现二叉树 */ public class BinaryTree { int treeNode; BinaryTree leftTree; BinaryTree rightTree; ...

  3. linux笔记三-------根目录相关说明

    1. /bin   binary二进制文件,可执行程序文件          ls   su    pwd    cd          内部文件是一些指令信息 2. /sbin  super bin ...

  4. 提示此windows副本不是正版的win7系统7601解决方法

      windows不是正版的提示一旦出现,那就表示我们的windows需要激活.在激活之前,我们的桌面主题就会无法正常更改,哪怕换了 壁纸或者主题我们的电脑显示屏依然会经常黑屏.虽然并不会影响我们使用 ...

  5. matlab中使用fuzzy工具箱

    4步教你学会使用matlab模糊控制工具箱 Matlab模糊控制工具箱为模糊控制器的设计提供了一种非常便捷的途径,通过它我们不需要进行复杂的模糊化.模糊推理及反模糊化运算,只需要设定相应参数,就可以很 ...

  6. HTML - 毛玻璃 滤镜 模糊

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

  7. 在PHP与HTML混合输入的页面或者模板中就需要对PHP代码进行闭合

    PHP程序的时候会在文件的最后加上一个闭合标签,如下: <?phpclass MyClass{public function test(){//do something, etc.}}?> ...

  8. PNG格式的图像文件，创建的图像的MIME类型的头部

    在安装完这三个组件后,还需要重新配置一次PHP,这也是你对采用DSO方式安装PHP感到庆幸的地方之一.运行make clean,然后在当前的配置中添加下面的内容: --with-gd=[/path/t ...

  9. iPhone的設置——FaceTime頁面

    這裏說的是蘋果的Hand off功能,系統升級後,蘋果的多部設備可以更好的“連續互通”.有電話打進來,iPhone.iPad和Mac都能收到,用戶可以任意選擇一款設備接電 話.同樣,iMessage也 ...

  10. sqlserver集合操作

    SQLServer2005通过intersect,union,except和三个关键字对应交.并.差三种集合运算 详细如下 use tempdb go if (object_id ('t1' ) is ...