提示：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. js中操作数组的一些方法【转】

    增 push   在数组的末尾添加一个或多个元素,并返回新的长度.  array.push(1,2,3.........) unshift  在数组的开头添加一个或多个元素,并返回新的长度. arra ...

  2. 修改linux运行级别

    1.Linux下的7个运行级别 0 系统停机模式,系统默认运行级别不能设置为0,否则不能正常启动,机器关闭. 1 单用户模式,root权限,用于系统维护,禁止远程登陆,就像Windows下的安全模式登 ...

  3. android夜间模式实现

    一.概述 android夜间模式实现分为两大类 重启activity的实现 不重启activity的实现 二.正文 1.重启activity实现夜间模式[在界面文件中的实现部分] 1.1在attrs. ...

  4. Pl/Sql 导入dmp文件时窗口一闪而过

    做如下设置: 点击“导入”,ok

  5. winform连接ACCESS数据库

    1.先建立一个名叫text.mdb的access数据库 2.他它复制到access中文件下. 3.在App_Code文件夹下建好封装语句,查询方法,连接语句,其中studentDA中的代码为: pri ...

  6. JAVA6开发WebService （四）——SAAJ调用WebService

    转载自http://wuhongyu.iteye.com/blog/810571 前面写了个JAX-WS的小例子,看到用JAVA6开发WebService确实很简单,也很方便,不过前面也说了,JAVA ...

  7. AESUtils.java

    package com.vcredit.framework.utils; import javax.crypto.Cipher;import javax.crypto.spec.SecretKeySp ...

  8. IOS第七天(5:UiTableView 汽车品牌,复杂模型分组展示,A-Z索要列表) (2015-08-05 14:03)

    复杂模型分组展示 #import "HMViewController.h" #import "HMCarGroup.h" #import "HMCar ...

  9. easyui datagrid 单选框 效果

    columns: [[{            field: 'oid',            title: '选择',            width: 20,            forma ...

  10. Codeforces Round #350 (Div. 2) E 思维模拟

    给出一个合法的括号串 有LRD三种操作 LR分别是左右移动当前位置 且合法 D为删除这个括号和里面的所有 当删除完成后 位置向右移动 如果不能移动 就向左 比赛都是很久远的事情了 写这道题也是一时兴起 ...