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 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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+MySQL投票系统的设计和实现分享
2012/09/23 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
python插入排序算法的实现代码
2013/11/21 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
python super()函数的基本使用
2020/09/10 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
优秀班干部事迹材料
2014/01/26 职场文书
年会主持词结束语
2014/03/27 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
计算机实训报告总结
2014/11/05 职场文书
大学生年度个人总结
2015/02/15 职场文书
小兵张嘎观后感
2015/06/03 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Python 视频画质增强
2022/04/28 Python
Django框架之路由用法
2022/06/10 Python