React中style的使用方法及注意事項是什么

發(fā)布時間：2023-02-25 10:53:45 來源：億速云閱讀：105 作者：iii 欄目：開發(fā)技術(shù)

這篇“React中style的使用方法及注意事項是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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  >white text2</div>
    <!-- div標(biāo)簽內(nèi)使用style屬性設(shè)置字體顏色 -->
 
     <span   ><a   href="http://www.baidu.com" 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 href="http://www.baidu.com" 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 href="http://www.baidu.com" 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的使用方法及注意事項是什么

補(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 <h2 style={{color:'red',textAlign:'center'}}>Hello World！</h2>;
}

或者

var myStyle = {color:'red',textAlign:'center'}
class HelloMessage extends React.Component {
    render() {
        return <h2 style={myStyle}>Hello World！</h2>;
    }
}

以上就是關(guān)于“React中style的使用方法及注意事項是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

React中style的使用方法及注意事項是什么

React中style的使用注意事項

補(bǔ)充：React 組件的 style 樣式使用相關(guān)問題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽