提示：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. Spring中depends-on的作用是什么？

    spring的IOC容器负责bean的管理,当实例化一个bean是,spring保证该Bean所依赖的其他bean已经初始化.一般情况下,用<ref>元素建立对其他bean的依赖关系. 比 ...

  2. 用css3实现一个带缺口的圆圈（图）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 3Sum

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  4. 【android异步处理】一个关于android异步处理的文章系列

    最近读了Android异步处理系列文章索引,感觉这个文章系列写得不错!可以作为参考

  5. [LintCode] House Robber III 打家劫舍之三

    The thief has found himself a new place for his thievery again. There is only one entrance to this a ...

  6. Hadoop.2.x_WebUV示例

    一.网站基本指标(即针对于网站用户行为而产生的日志中进行统计分析) 1. PV:网页浏览量(Page View页面浏览次数,只要进入该网页就产生一条记录,不限IP,统计点每天(较多)/每周/每月/.. ...

  7. mysql字符乱码

    解决mysql字符乱码思路: mysql服务器字符集 mysql客户端字符集 系统字符集 生产环境改字符集: 1.导出表结构到 scam.sql文件中 2.更改scam.sql文件中的字符集为想要的字 ...

  8. 关于ueditor1_4_3 上传出现无法加载配置的问题

    我的解决方案是: 1. 检查 ueditor.config.js  中的 serverUrl: URL + "/net/controller.ashx" 的配置,记得一定用绝对路径 ...

  9. SSH集成开发框架开发步骤

    1.  环境搭建 a)添加Struts框架的支持 b)添加spring框架的支持(选中5个类库,且Copy类库到WEB-INF/lib目录下) c)在Eclipse 中,DataBase Explor ...

  10. result结果集

    结果集(ResultSet)是数据中查询结果返回的一种对象,可以说结果集是一个存储查询结果的对象,但是结果集并不仅仅具有存储的功能,他同时还具有操纵数据的功能,可能完成对数据的更新等. 结果集读取数据 ...