前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在一些模块上遇到了不晓得阻力,又苦于网上没有找到那么多资源.于是打算先放一段时间,还是回过头来看ReactJs吧.

React颠覆了html的传统思维,代码基本都写在<script  type="text/babel"></script>标签里面.我开发的时候采用的是IDEA,当然也可以使用atom或者webstor.使用IDEA时,需要在settings里面的Language & Framework设置Javascript language version为JSX Harmony.否则,编辑器可能会对你的正确语法进行报错.

<script src="../js/react.js"></script>

<script src="../js/react-dom.js"></script>

<script src="../js/browser.min.js"></script>

<script src="../js/jquery-1.7.2.min.js"></script>

html文件header标签里面引用上面前三个文件,就可以进行react开发了,但是由于jquery的ajax请求比较方便,所以这里我引用了jquery,当然也可以自己封装一个类似于ajax的方法,或者使用原生http请求与后台交互.

今天主要说说设置react样式的问题:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Js</title>
    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/jquery-1.7.2.min.js"></script>
    <style rel="stylesheet">
        .hello{
            color: #ffffff;width: 200px;height: 30px;border: none;background-color: #00a0e9;line-height: 30px;text-align: center;font-size: 14px;
            font-family: "Microsoft YaHei UI";cursor: pointer;
        }
       .redBack{
            background-color: #f00;overflow: hidden;
       }
    </style>
</head>
<body>
<div id="msg"></div>
</body>
<script type="text/babel">
    var colorStyle={
        color: '#ffffff',
            width: 200,height: 30,border: 'none',backgroundColor: '#00a0e9',textAlign: 'center',fontSize: 14,
    fontFamily: "Microsoft YaHei UI",cursor: 'pointer',float:'left',lineHeight:'30px'
    };
    var Http=React.createClass({
        getInitialState: function () {
            return{
                videoSrc:"../src/demo1.mp4"
            }
        },
        handPost:function () {
//           var HTTPrequest=new XMLHttpRequest();
//            HTTPrequest.open("GET","/json/city");
//            HTTPrequest.send();
//            HTTPrequest.onreadystatechange =function () {
//                if(HTTPrequest.readyState==4 && HTTPrequest.status==200){
//                    console.log(JSON.parse(HTTPrequest.responseText));
//                }
//            }
            $.ajax({
                type:'GET',
                url:'/json/city',
                dataType:'json',
                success: function (data) {
                   console.log(data)
                }
            })
        },
        render:function () {
            return(
                    <div className="redBack">
                       <video src={this.state.videoSrc} style={{float:'left',width:300,border:'5px solid #ffffff'}} controls="controls"></video>
                       <div onClick={this.handPost} style={colorStyle}>点击请求城市资源</div>
                    </div>
                    )
        }
    });
    ReactDOM.render(
            <Http/>,document.getElementById('msg')
    )
</script>
</html>

如上代码所示,我觉得设置样式有三种方法:

1.如蓝色字体部分所示,直接写行内样式

2.在js代码中定义一个变量,然后在元素标签内部调用变量,如红色字体所示.

3.设置标签的className,如绿色字体部分
下面附上截图:

ReactJs设置css样式的更多相关文章

  1. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  2. JS设置CSS样式的几种方式

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  3. 关于jquery中用函数来设置css样式

    关于jquery中用函数来设置css样式 2016-12-21 23:27:55 1.jquery语法 $(selector).css(name,function(index,value)) name ...

  4. JS设置CSS样式的几种方式【转】

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  5. cssText设置css样式

    js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js   如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...

  6. 3.通过js代码设置css样式

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

  7. 5、通过js代码设置css样式

    1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. react学习(四)之设置 css样式 篇

    react中设置css样式 方法一: 行内样式:使用{{  }},与正常jsx中插入js代码不一样,这里需要两个括号. <div style={ { float: 'right',} }> ...

  9. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

随机推荐

  1. Oracle 表分区

    从以下几个方面来整理关于分区表的概念及操作: 表空间及分区表的概念 表分区的具体作用 表分区的优缺点 表分区的几种类型及操作方法 对表分区的维护性操作 1.表空间及分区表的概念 表空间: 是一个或多个 ...

  2. PL/SQL 查找1-100之间的素数

    --实现查找1-100之间的素数 declare v_no ; --标记是第几个素数 v_number number; --表示1-100之间的数 v_num number; begin .. loo ...

  3. coroSync packmarker

    CoroSync+Pacemaker实现web高可用 2015-04-12 23:38:19 标签:CoroSync pacemaker 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 ...

  4. MySQL 批量插入 Update时Replace

    建一张试验表如下: 一.批量插入 MySQL的INSERT有一种写法如下: INSERT INTO person VALUES (NULL,'关羽', '2016-04-22 10:00:00'), ...

  5. iptables-qos-tcpcopy-tc-tcpdump

    QOS: https://www.chiphell.com/thread-427876-1-1.html iptables指南: http://man.chinaunix.net/network/ip ...

  6. 8.adr与ldr伪指令的区别

    ldr和adr都是伪指令,区别是ldr是长加载.adr是短加载. 重点:adr指令加载符号地址,加载的是运行时地址: ldr指令加载符号地址时,加载的是链接地址.

  7. Flex_控件

    1.Text控件 外观: 代码: <?xml version="1.0" encoding="utf-8"?> <s:Application ...

  8. 【转载】大数据量传输时配置WCF的注意事项

    WCF传输数据量的能力受到许多因素的制约,如果程序中出现因需要传输的数据量较大而导致调用WCF服务失败的问题,应注意以下配置: 1.MaxReceivedMessageSize:获取或设置配置了此绑定 ...

  9. tz2txt的安装与使用

    tz2txt是一个开源的小工具,用于把帖子的楼主发言保存为txt文件. 目前支持天涯社区.新浪论坛(大部分版块).百度贴吧. 本文介绍tz2txt的安装与使用. 本文目录: 一.下载.安装 二.使用t ...

  10. Python延迟打印字符

    我想让python打印类似“正在加载...”,每个句号打印出来与它们之间的睡眠时间0.5秒间隔 实现方法: 1 2 3 4 5 6 7 8 9 10 11 #!/bin/env python # -* ...