React中style的使用及注意事項(推薦)
更新時間：2023年02月20日 10:02:50 作者：russle
React中style的使用和直接在HTML中使用有些不同，第一，React中必須是style="opacity:{this.state.opacity};"這種寫法，第二如果設置多個style格式如下，多個style中間使用逗號分割，這篇文章主要介紹了React中style的使用注意事項,需要的朋友可以參考下
React中style的使用注意事項
React中style的使用和直接在HTML中使用有些不同，第一，React中必須是style="opacity:{this.state.opacity};"這種寫法，第二如果設置多個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標簽內使用style屬性設置字體顏色 --> ? ?? ? <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 樣式使用相關問題
組件名內不能使用 style 樣式，例如：假設該組建名為 <HelloMessage />，如果我們寫成：<HelloMessage style={{color:'red',textAlign:'center'}}/> 這樣，那么該組件名是無 style 樣式的，也就是說我們剛寫的 style 樣式，是無效的，因此我們不能把樣式寫在該組件中！那么我們應該把樣式寫在哪里呢? 我們應該把樣式寫在：
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>;
????}
}到此這篇關于React中style的使用注意事項的文章就介紹到這了,更多相關React中style使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了React中如何設置自定義滾動條樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了react應用中的DOM DIFF算法，幫助大家更好的理解和學習使用react，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家介紹了React?setState是異步還是同步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了react如何將字符串轉義成html語句問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
React Hooks獲取數(shù)據實現(xiàn)方法介紹
這篇文章主要介紹了react hooks獲取數(shù)據,文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進行綁定，實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-10-10
React?Hooks之useDeferredValue鉤子用法示例詳解
useDeferredValue鉤子的主要目的是在React的并發(fā)模式中提供更流暢的用戶體驗,特別是在有高優(yōu)先級和低優(yōu)先級更新的情況下,本文主要講解一些常見的使用場景及其示例2023-09-09
這篇文章主要介紹了React 條件渲染最佳實踐小結(7種)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
react?umi?刷新或關閉瀏覽器時清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關閉瀏覽器時清除localStorage方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了使用useEffect模擬組件生命周期，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在react項目中使用antd的form組件,動態(tài)設置input框的值
這篇文章主要介紹了在react項目中使用antd的form組件,動態(tài)設置input框的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10