React给添加元素增加样式
第一种方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> <script src="lib/style.js"></script> <style> .lala{ color:red; font-size: 40px; } </style> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello=React.createClass({ render:function(){ return ( <div className="lala"> 我出来了! </div> ) } }) ReactDOM.render( <Hello/>, document.getElementById('example') ); </script> </body> </html>
第二种方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> <script src="lib/style.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello=React.createClass({ render:function(){ var style={color:"red","font-size":"40px"} return ( <div style={style}> 我出来了! </div> ) } }) ReactDOM.render( <Hello/>, document.getElementById('example') ); </script> </body> </html>
第三种方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> <script src="lib/style.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello=React.createClass({ render:function(){ return ( <div style={this.css.style3} > 我出来了! </div> ) } }) Hello.prototype.css={ style3:{color:"green",fontSize:"50px",background:"#ccc"} } ReactDOM.render( <Hello/>, document.getElementById('example') ); </script> </body> </html>
第四种方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> <script src="lib/style.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello=React.createClass({ render:function(){ return ( <div style={style.str1} > 我出来了! </div> ) } }) ReactDOM.render( <Hello/>, document.getElementById('example') ); </script> </body> </html>
style.js的代码:
var style={ str1:{"font-size":"40px",color:"green","200px",height:"300px","text-align":"center",border:"1px solid gray"} }