React 中style的使用

最後更新：2018-07-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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>
    

   <span style="backgroundColor:#FFFF90" ><a style="color:#FF00FF" href="http://www.baidu.com" >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">  </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" style={{color: '#CC0000'}}>HrefColor</a></td>            </tr>              <tr>              <td>2</td>              <td>Jacob</td>              <td style={{backgroundColor:'#00CC00'}} > <a href="http://www.baidu.com" 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>

最終效果圖如下：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More