React中style的使用及注意事項(推薦)
React中style的使用注意事項
React中style的使用和直接在HTML中使用有些不同,第一,React中必須是style="opacity:{this.state.opacity};"這種寫法,第二如果設(shè)置多個style格式如下,多個style中間使用逗號分割。
var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix };
但是在html中我們通常直接使用,多個style中間使用分號;
<div? style="backgroundColor:#FFFF90; color:#FFFFFF">white text2</div> ??? <!-- div標(biāo)簽內(nèi)使用style屬性設(shè)置字體顏色 --> ? ?? ? <span? style="backgroundColor:#FFFF90" ><a style="color:#FF00FF"? rel="external nofollow" rel="external nofollow" rel="external nofollow" >nihao</a> </span>
代碼示例給出一個表格中文本的顏色和文本框背景顏色的示例:
</pre><pre name="code" class="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../build/react.js"></script> <script src="../build/JSXTransformer.js"></script> <script src="../build/react-bootstrap/react-bootstrap.min.js" type="text/javascript"></script> <link rel="stylesheet" href="../build/bootstrap/css/bootstrap.min.css" rel="external nofollow" > </head> <body> <div id="example"></div> <script type="text/jsx"> var Table = ReactBootstrap.Table; var TableDemo = React.createClass({ render: function() { var textColor = "#CC0000"; var bgColor = "#00CC00"; return ( <Table striped bordered condensed hover> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td style={{color: textColor}}>1textColor</td> <td style={{color: textColor,backgroundColor:'#00CC00'}}>MarkColorAndbgColor</td> <td style={{backgroundColor:bgColor}}>OttobgColor</td> <td><a rel="external nofollow" rel="external nofollow" rel="external nofollow" style={{color: '#CC0000'}}>HrefColor</a></td> </tr> <tr> <td>2</td> <td>Jacob</td> <td style={{backgroundColor:'#00CC00'}} > <a rel="external nofollow" rel="external nofollow" rel="external nofollow" style={{color: '#CC0000'}}>HrefColorAndbgColor</a> </td> <td>NameFull2</td> </tr> <tr> <td>3</td> <td colSpan="2">Larry the Bird3Column</td> <td>@twitter</td> </tr> </tbody> </Table> ); } }); React.render(<TableDemo/>, document.body); </script> </body> </html>
最終效果圖如下:
補充:React 組件的 style 樣式使用相關(guān)問題
組件名內(nèi)不能使用 style 樣式,例如:假設(shè)該組建名為 <HelloMessage />,如果我們寫成:<HelloMessage style={{color:'red',textAlign:'center'}}/> 這樣,那么該組件名是無 style 樣式的,也就是說我們剛寫的 style 樣式,是無效的,因此我們不能把樣式寫在該組件中!那么我們應(yīng)該把樣式寫在哪里呢? 我們應(yīng)該把樣式寫在:
function HelloMessage(props) { return <h1 style={{color:'red',textAlign:'center'}}>Hello World!</h1>; }
或者
var myStyle = {color:'red',textAlign:'center'} class HelloMessage extends React.Component { ????render() { ????????return <h1 style={myStyle}>Hello World!</h1>; ????} }
到此這篇關(guān)于React中style的使用注意事項的文章就介紹到這了,更多相關(guān)React中style使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React?Native性能優(yōu)化指南及問題小結(jié)
本文將介紹在React?Native開發(fā)中常見的性能優(yōu)化問題和解決方案,包括ScrollView內(nèi)無法滑動、熱更新導(dǎo)致的文件引用問題、高度獲取、強制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧2024-01-01