欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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>

最終效果圖如下:

補充: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 Router V6更新內(nèi)容詳解

    React Router V6更新內(nèi)容詳解

    這篇文章主要為大家介紹了React Router V6更新內(nèi)容,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12
  • 詳解react服務(wù)端渲染(同構(gòu))的方法

    詳解react服務(wù)端渲染(同構(gòu))的方法

    這篇文章主要介紹了詳解react服務(wù)端渲染(同構(gòu))的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • React精髓!一篇全概括小結(jié)(急速)

    React精髓!一篇全概括小結(jié)(急速)

    這篇文章主要介紹了React精髓!一篇全概括小結(jié)(急速),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • React組件化學(xué)習(xí)入門教程講解

    React組件化學(xué)習(xí)入門教程講解

    React是現(xiàn)在前端使用頻率最高的三大框架之一,React率先提出虛擬DOM的思想和實現(xiàn),使其保持有良好的性能。本篇文章將對React組件化的入門學(xué)習(xí)進(jìn)行講解,同時針對模塊化的思想進(jìn)行概述,為接下來組件化開發(fā)的文章進(jìn)行知識儲備
    2022-09-09
  • React虛擬渲染實現(xiàn)50個或者一百個圖表渲染

    React虛擬渲染實現(xiàn)50個或者一百個圖表渲染

    這篇文章主要為大家介紹了React虛擬渲染實現(xiàn)50個或者100個圖表渲染的實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • React中常用的Hook有哪些

    React中常用的Hook有哪些

    這篇文章主要介紹了react hooks實現(xiàn)原理,文中給大家介紹了useState dispatch 函數(shù)如何與其使用的 Function Component 進(jìn)行綁定,節(jié)后實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • React 三大屬性之state的使用詳解

    React 三大屬性之state的使用詳解

    這篇文章主要介紹了React 三大屬性之state的使用詳解,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • React高級概念之Context用法詳解

    React高級概念之Context用法詳解

    在React應(yīng)用中,為了讓數(shù)據(jù)在組件間共享,常見的方式是讓它們以props的形式自頂向下傳遞,如果數(shù)據(jù)要在組件樹不同層級共享,那么這些數(shù)據(jù)必須逐層傳遞直到目的地,Context如同管道,它將數(shù)據(jù)從入口直接傳遞到出口,使用Context能避免“prop-drilling”
    2023-06-06
  • react解析html字符串方法實現(xiàn)

    react解析html字符串方法實現(xiàn)

    在使用reactjs庫的時候,會遇到將一段html的字符串,然后要將它插入頁面中以html的形式展現(xiàn),本文主要介紹了react解析html字符串方法實現(xiàn),感興趣的可以了解一下
    2023-12-12
  • React?Native性能優(yōu)化指南及問題小結(jié)

    React?Native性能優(yōu)化指南及問題小結(jié)

    本文將介紹在React?Native開發(fā)中常見的性能優(yōu)化問題和解決方案,包括ScrollView內(nèi)無法滑動、熱更新導(dǎo)致的文件引用問題、高度獲取、強制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧
    2024-01-01

最新評論