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之三(封装和信息隐藏)
Jan 27 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
微信小程序事件流原理解析
Nov 27 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
浅谈javascript的调试
2015/01/28 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python构建自定义回调函数详解
2017/06/20 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
销售总监岗位职责
2014/01/04 职场文书
法制宣传月活动方案
2014/05/11 职场文书
经典毕业生求职信
2014/07/12 职场文书
谢师宴家长致辞
2015/07/27 职场文书