提示：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. Linux下多进程编程之exec函数语法及使用实例

    exec函数族 1)exec函数族说明 fork()函数用于创建一个子进程,该子进程几乎复制了父进程的全部内容,但是,这个新创建的进程如何执行呢?exec函数族就提供了一个在进程中启动另一个程序执行的 ...

  2. struts2中拦截器与过滤器的区别

    1.拦截器是基于java反射机制的,而过滤器是基于函数回调的. 2.过滤器依赖与servlet容器,而拦截器不依赖与servlet容器.  3.拦截器只能对Action请求起作用,而过滤器则可以对几乎 ...

  3. JAVA复制网络图片到本地

    import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.io.Out ...

  4. hdu1241 dfs

    链接改天再补 杭电又崩了... 题意:求“@”组成了多少个联通区域,每个点的8个方向都认为是相连的 思路:对每一个点进行搜索 当Map == @ && vis == 0 时 可进入搜索 ...

  5. Struts2下的<result>中的type整理

    1.<result name="处理结果名" type="相应结果类型">“响应内容”</result> 解释:name的值shift指 ...

  6. Aidl的使用步骤

    先说说Aidl传递参数类型 1.基本数据类型(除short类型) 2.String.charSequence 3.List,map 4.parcelable 第1步:定义一个*.aidl文件,ecli ...

  7. 从jQuery中学习来的另一种继承方式（技巧）

    遵从Js的原型链规则,利用js灵活的特性灵活地改造原型,可以实现各种创意地继承方式,昨天研究了jQuery,对作者实现继承的方式感到佩服,他对js原型和原型链的理解比较透彻,运用自如.这里给出jQue ...

  8. C# 文件和文件夹操作

    一.文件操作 1.File类的常用静态方法: void AppendAllText(string path, string contents),将文本contents附加到文件path中 bool E ...

  9. Java与C++面向对象不同点

    首先面向对象的语言有哪些?JAVA.C++.C#等等.但是呢很多人认为C#和C++有关系,其实一点关系都是没有滴.C#是仿Java做的,很多人都说是假Java,因为C#和Java太像了比如C#也有st ...

  10. 新广告法，极限词剔除，替换掉的mysql语句

    国家级,世界级,最高级, 最佳,最大,第一, 唯一,首个,首选, 最好,最大,精确, 顶级,最高,最低, 最,最具,最便宜, 最新,最先进,最大程度, 最新技术,最先进科学,国家级产品, 填补国内空白 ...