提示：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. Hibernate条件查询

    设计上可以灵活的根据 Criteria 的特点来方便地进行查询条件的组装.现在对 Hibernate的Criteria 的用法进行总结:Hibernate 设计了 CriteriaSpecificat ...

  2. JS实现设为首页与加入收藏

    <script type="text/javascript"> // 设置为主页 function SetHome(obj, vrl) { try { obj.styl ...

  3. 配置Nginx支持ThinkPHP的URL重写和PATHINFO

    ThinkPHP支持通过PATHINFO和URL rewrite的方式来提供友好的URL,只需要在配置文件中设置 'URL_MODEL' => 2 即可.在Apache下只需要开启mod_rew ...

  4. android中的Dialog

    一.Dialog概述 二.使用系统自带的Dialog 1.新建Builder AlertDialog.Builder builder = new AlertDialog.Builder(StoryAc ...

  5. Hibernate前置和后置方法

    public class Test01 { private ServiceRegistry sr =null; private Session se =null; private Transactio ...

  6. 1021上课演练----SQL注入与避免（银行系统）

    package com.bank; import java.sql.CallableStatement; import java.sql.Connection; import java.sql.Dat ...

  7. orcale 动态执行语句

    create or replace function fn_test2(tablename in varchar2) return number is rtn number; begin --通用的获 ...

  8. winform 打印控件

    (1)PageSetupDialog1    打印设置窗口  (2)PrintDocument     向打印机输送的对象 事件:PrintPage   对于打印的每一页都执行一次 (3)PrintP ...

  9. 获取Android studio的SHA1值

    D:\Android\BaiduMapsApiASDemo>c: C:\>cd .android 系统找不到指定的路径. C:\>cd Users C:\Users>cd Ad ...

  10. PHP filesystem attack vectors

    http://www.ush.it/2009/02/08/php-filesystem-attack-vectors/ On Apr 07, 2008 I spoke with Kuza55 and ...