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<br /> <!-- div标签内使用style属性设置字体颜色 --><br /> <br /> <span><a href="http://www.baidu.com">nihao </a></span></div>
代码示例给出一个表格中文本的颜色和文本框背景颜色的示例:
<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> <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>
最终效果图如下: