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>


<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>

最终效果图如下：

原文地址：https://www.jb51.cc/react/307547.html

React 中style的使用

相关推荐