溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“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 >white text2</div> <!-- div標簽內使用style屬性設置字體顏色 --> <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>最終效果圖如下：
組件名內不能使用 style 樣式，例如：假設該組建名為 <HelloMessage />，如果我們寫成：<HelloMessage style={{color:'red',textAlign:'center'}}/> 這樣，那么該組件名是無 style 樣式的，也就是說我們剛寫的 style 樣式，是無效的，因此我們不能把樣式寫在該組件中！那么我們應該把樣式寫在哪里呢? 我們應該把樣式寫在：
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>;
}
}以上就是關于“React中style的使用方法及注意事項是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
