<!DOCTYPE>

<html>

    <head>

        <meta charset="utf-8">

        <title></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="dome"></div>

        <script type="text/babel">

            var Fir = React.createClass({

                render:function(){

                    return (

                        <div>

                            <img src="./images/jj.png" />

                            <p style={ {'color':'red','fontSize':'50px'}}>{this.props.user}</p>

                            <p><a href={this.props.url}>个人详情</a> <span>AGE：{this.props.age}</span> </p>

                        </div>

                    );

                }

            });

            var obj = {

                user : '夺命雷公狗',

                age : '16',

                url : 'http://www.showtp.com'

            }

            ReactDOM.render(

                <Fir {...obj} />,

                document.getElementById('dome')

            );

        </script>

    </body>

</html>

效果如下所示：

夺命雷公狗-----React---11--添加css样式的方法的更多相关文章

  1. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  2. 夺命雷公狗---TP商城----TP之样式和特效以及图片引入---2

    ---恢复内容开始--- 刚才见到笑脸了,那么下一步就到我们的shop目录下创建一个Admin的目录了,然后将Home目录里面的东西全部都拉进去即可 然后我们回到shop\Home\View目录下创建 ...

  3. 夺命雷公狗—angularjs—11—service的基本概念

    我们先来研究下service里面的四大服务.. value 变量 constant  常量 factory   工厂模式 service 服务 <!DOCTYPE html> <ht ...

  4. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...

  5. 夺命雷公狗—angularjs—25—angular内置的方法（高级）

    查看版本信息 angular.version console.log(angular.version); 判断是否相等 angular.equals() var str1 = ''; var str2 ...

  6. 夺命雷公狗jquery---1选择元素的3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 夺命雷公狗---linux之红帽的安装

    夺命雷公狗分享的第二套安装linux方法是RadHad的安装方法,,, 点击然后就自动重启了

  8. 夺命雷公狗---linux之centos的安装

    由于要玩node.js了,所以还是来复习下linux系统才行,所以夺命雷公狗分享两套安装linux的方法,这是centos的安装方法,,, 管理员默认帐号为:root,密码则是刚才您输入的那个...

  9. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. 20145330第六周《Java学习笔记》

    20145330第六周<Java学习笔记> . 这周算是很忙碌的一周.因为第六周陆续很多实验都开始进行,开始要准备和预习的科目日渐增多,对Java分配的时间不知不觉就减少了,然而第十和十一 ...

  2. js 遮罩层 loading 效果

    //调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerSho ...

  3. Jquery用法

    $this.closest("dd").addClass("selected").siblings().removeClass("selected&q ...

  4. android-数据存储之手机内部file存储

    一.基础概要 1.说明: 1>应用程序运行需要一些较大的数据或者图片可保存在手机内部 2>文件类型:任意 3>路径:/data/data/packageName/files/ 4&g ...

  5. $_POST 变量以及$GLOBALS['HTTP_RAW_POST_DATA']

    $_POST 变量是一个数组,内容是由 HTTP POST 方法发送的变量名称和值. $_POST 变量用于收集来自 method="post" 的表单中的值.从带有 POST 方 ...

  6. 演示一个使用db vault进行安全控制的示例

    1.确认数据库版本 2.安装db vault组件 通过DBCA配置db vault: 3.创建测试用户及表 4.创建域并加入用户 5.测试演示

  7. Expect 初学

    expect可以帮助脚本完成自动化.今天就用二种实例来介绍2种写法. 安装 yum -y install expect 一.直接用/usr/bin/expect 这种就不方便调用linux下的环境变量 ...

  8. 局域网访问本地localhost页面

    1.关闭防火墙 2.cmd - ipconfig - IPv4 地址 . . . . . . . . . . . . : 192.168.0.34 如果链接的是wifi,请右键确保手机和电脑链接同一个 ...

  9. Android课程---进度条及菜单的学习

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  10. EmguCV 轮廓匹配

    一.相关类 MCvMoments inv_sqrt_m00 m00!=0?1/sqrt(m00):0 m00  spatial moments m01, m02, m03, m10, m11 m12, ...