快捷導(dǎo)航

React中style的使用及注意事項(推薦)

更新時間：2023年02月20日 10:02:50 作者：russle

React中style的使用和直接在HTML中使用有些不同，第一，React中必須是style="opacity:{this.state.opacity};"這種寫法，第二如果設(shè)置多個style格式如下，多個style中間使用逗號分割，這篇文章主要介紹了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>

最終效果圖如下：

補(bǔ)充：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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: