提示：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="留言" />

                    </div>

                );

            }

        });

        var user = '夺命雷公狗';

        ReactDOM.render(<Fir user={user} />, /*这里其实也可以使用双标签的如：<Fir></Fir>  */

            document.getElementById('demo'),

            function(){

                alert('页面渲染完成');

        });

    </script>

</body>

</html>

夺命雷公狗-----React---4--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---5--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. javascript原型方法

    function createXMLHttp() { if(window.XMLHttpRequest){ return new XMLHttpRequest(); } else if(window. ...

  2. 这世上倒底有没有神仙——说“Excel不是数据库，是不是犯了白马非马论的错误？？

    这问题是这样引出来的: 我上计算机应用基础课,讲到Excel,因为一直以来,很多新生对Word中的表格和Excel中的表格总是分不清,甚至有老师也问过我,Excel中的表格和Word中的表格有什么区别 ...

  3. 一个网页抓取的类支持get+post+cookie存储

    前段时间提取了一个工具类,分享给大家: <?php class httpconnector { private $curl; private $cookie; private $kv; func ...

  4. awesome-scala

    https://github.com/lauris/awesome-scala Awesome Scala  A community driven list of useful Scala libra ...

  5. 自己编写php框架（一）

    这两天一直在琢磨如何做一个php模板,将前台html页面和php代码分割开来.虽然现在市面上有各种各样的php模板,但还是想自己编写一个体验一下. 之前一直写到了将替换完php代码的含有php代码的h ...

  6. HTML静态网页 Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  7. JSONObject简介

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

  8. win10如何让她闭嘴、按什麽建系统都要说话、如何让她闭嘴？

    win10如何让她闭嘴.按什麽建系统都要说话.如何让她闭嘴? 开始 设置 轻松使用 讲述人,关掉……

  9. Python多行注释

    由于Python的注释只有针对于单行的注释(用#),多行注释时很不方便(要想多行注释只能每行代码前面都加上#).在网上看到一个Python的多行注释方法,分享给大家,其实很简单的,就是使用一对三个双引 ...

  10. Color Space: HSI

    HSI色彩空间是从人的视觉系统出发,用色调(Hue).色饱和度(Saturation或Chroma)和亮度 (Intensity或Brightness)来描述色彩.HSI色彩空间可以用一个圆锥空间模型 ...