react demo4 (设置组件样式)

xiaoxiao2021-02-28  93

react dome 4 需求:定义一个组件,同时使用3中设置组件样式的方式 学习:设置组件的样式

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <script src="./build/react-dom.js"></script> <script src="./build/browser.min.js"></script> <style> .style{font-size:12px;} .ping{color:deeppink;} </style> </head> <body> <div id="container"></div> <script type="text/babel"> /* 需求:定义一个组件,同时使用3中设置组件样式的方式 <div> 内联样式:设置背景颜色,边框大小,边框颜色 <h1></h1> 对象样式:设置背景颜色,字体颜色 <p></p> 选择器样式:设置字体大小 </div> */ /* 设置组件的样式: 1.内联样式 2.对象样式 3.选择器样式 注意:在react和html5中设置样式时的书写格式是有区别的 1.html5以;结尾 react以,结尾 2.html5中key,value都不加引号 react中属于javascript对象,key的名字不能出现"-",需要使用驼峰命名法,如value为字符串,需要加引号 3.html5中,value如果是数字,需要带单位 react不需要带单位 4.html5中,样式类为class react中,样式类为className(类似的,使用htmlFor替换for) */ var hStyle={ backgroundColor:"blue", color:"gray", fontSize:"20px" } var ShowMessage = React.createClass({ render:function () { return ( <div style={{backgroundColor:"yellow",borderStyle:"solid",borderWidth:5,borderColor:"black"}}> <h1 style={hStyle}>{this.props.fistRow}</h1> <p className="style ping">{this.props.SecondRow}</p> </div> ) } }); ReactDOM.render( <ShowMessage fistRow="标题" SecondRow="文本内容文本内容" />, document.getElementById("container") ) </script> </body> </html>

效果显示:

转载请注明原文地址: https://www.6miu.com/read-50754.html

最新回复(0)