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>
效果显示：
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
