宜宾网站建设公司

ReactJs中怎么设置css样式

本篇文章为大家展示了ReactJs中怎么设置css样式，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联公司于2013年开始，是专业互联网技术服务公司，拥有项目成都网站建设、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元诏安做网站,已为上家服务,为诏安各地企业和个人服务,联系电话:18982081108

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

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

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




  
  React Js
  
  
  
  
  
    .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;
    }
  
  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(                                     点击请求城市资源
          
          )     }   });   ReactDOM.render(       ,document.getElementById('msg')   )

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

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

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

3.设置标签的className,如绿色字体部分

下面附上截图:

ReactJs中怎么设置css样式

上述内容就是ReactJs中怎么设置css样式，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


文章标题：ReactJs中怎么设置css样式
URL地址：http://ybzwz.com/article/gegish.html

其他资讯