ReactJs设置css样式的方法


Posted in Javascript onJune 08, 2017

前段时间看了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样式的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
JS清除选择内容的方法
Jan 29 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
原生js实现获取form表单数据代码实例
Mar 27 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
requirejs按需加载angularjs文件实例
Jun 08 #Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 #Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 #Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
原生JS发送异步数据请求
Jun 08 #Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 #Javascript
vue.js中过滤器的使用教程
Jun 08 #Javascript
You might like
PHP高自定义性安全验证码代码
2011/11/27 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
python字符串排序方法
2014/08/29 Python
Python中__new__与__init__方法的区别详解
2015/05/04 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
phpquery中文手册
2021/03/18 PHP
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
考试作弊检讨
2015/01/27 职场文书
简单的辞职信模板
2015/05/12 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs