提示：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. Maven_如何为开发和生产环境建立不同的配置文件 --我的简洁方案

    其实也是最近才看Maven, 以前都是用ant+ivy, 对于轻量级的项目来说足够了, 而且非常灵活. 看了看Maven, 约定.... 现在编程都说约定, 约定是挺好, 问题是超出约定的事情太多了, ...

  2. FileUpload文件上传控件

    1.FileUpload控件的主要功能是向指定目录上传文件.FileUpload控件不会自动上传控件,而需要设置相关的事件处理程序,然后在程序中实现文件上传. 2.FileUpload控件常见的属性 ...

  3. java eclipse中的代码联动提示功能

    eclipse中的代码联动提示设置:window--->preferences--->java--->editor----> content assist的auto activ ...

  4. 让wego微购购物分享系统采集拍拍数据功能之腾讯paipai功能采集插件

    wego是一款很不错的导购系统,无论前后台设计风格和功能都还不错,可有时我们的确需要一些自定义的功能,毕竟万千世界,大家都做一样的东西,采集同样的数据,能不烦吗?哈哈,今天就奉献上一个wego拍拍采集 ...

  5. 用CSS设置Table的细边框的最好用的方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. [LintCode] Surrounded Regions 包围区域

    Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is captured ...

  7. cookie的设置，获取，取消

    <!DOCTYPE> <html> <head> <meta http-equiv=Content-Type content="text/html; ...

  8. 面试之servlet、过滤器、监听器

    servlet.过滤器.监听器servlet是Java中WEB请求和响应的容器servlet的运行需要在类似tomcat容器中,一个 Web 应用对应一个 Context 容器,也就是 Servlet ...

  9. JSONObject简介

    JSONObject简介 本节摘要:之前对JSON做了一次简单的介绍,并把JSON和XML做了一个简单的比较:那么,我就在想,如果是一个json格式的字符串传到后台,需要怎么对其处理?如果前台页面需要 ...

  10. HTML5文件API

    File对象与File对象 Blob对象 FileReader对象 File对象 <!DOCTYPE html> <html> <head> <meta ht ...