您好,登錄后才能下訂單哦!
本篇文章為大家展示了ReactJs中怎么設(shè)置css樣式,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
React顛覆了html的傳統(tǒng)思維,代碼基本都寫在<script type="text/babel"></script>標(biāo)簽里面.我開(kāi)發(fā)的時(shí)候采用的是IDEA,當(dāng)然也可以使用atom或者webstor.使用IDEA時(shí),需要在settings里面的Language & Framework設(shè)置Javascript language version為JSX Harmony.否則,編輯器可能會(huì)對(duì)你的正確語(yǔ)法進(jìn)行報(bào)錯(cuò).
<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標(biāo)簽里面引用上面前三個(gè)文件,就可以進(jìn)行react開(kāi)發(fā)了,但是由于jquery的ajax請(qǐng)求比較方便,所以這里我引用了jquery,當(dāng)然也可以自己封裝一個(gè)類似于ajax的方法,或者使用原生http請(qǐng)求與后臺(tái)交互.
今天主要說(shuō)說(shuō)設(shè)置react樣式的問(wèn)題:
<!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}>點(diǎn)擊請(qǐng)求城市資源</div> </div> ) } }); ReactDOM.render( <Http/>,document.getElementById('msg') ) </script> </html>
如上代碼所示,我覺(jué)得設(shè)置樣式有三種方法:
1.如藍(lán)色字體部分所示,直接寫行內(nèi)樣式
2.在js代碼中定義一個(gè)變量,然后在元素標(biāo)簽內(nèi)部調(diào)用變量,如紅色字體所示.
3.設(shè)置標(biāo)簽的className,如綠色字體部分
下面附上截圖:
上述內(nèi)容就是ReactJs中怎么設(shè)置css樣式,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。