理论理解
图片.png
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件</title>
<script src="./build/react.js" charset="utf-8"></script>
<script src="./build/react-dom.js" charset="utf-8"></script>
<script src="./build/browser.min.js" charset="utf-8"></script>
<style>
.pStyle {
font-size: 20px;
}
</style>
</head>
<body>
<div id="hello">
</div>
<div id="hello1">
</div>
</body>
<script type="text/babel">
/*
创建一个组件类:
1.React中的组件类和java中的一样,首字母大写,驼峰命名法规则
2.在React中使用creacteClass方法创建组件类
3.每个组件类必须实现自己的render方法,输出定义好的组件模板,返回值:null,false,组件模板
4.注意:组件类只能包含一个顶层标签
*/
//注意:React.createClass---atom软件自动提示的有问题
var HelloMessage = React.createClass({
render: function() {
return <h1>haha</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById("hello")
);
var hStyle = {
backgroundColor:"green",
color:"red"
}
var ShowMessage = React.createClass({
render:function() {
return (
<div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}>
<h1 style={hStyle}>{this.props.firstRow}</h1>
<p className="pStyle">{this.props.secondRow}</p>
</div>
);
}
});
ReactDOM.render(
<ShowMessage firstRow="你好" secondRow="潘园园"/>,
document.getElementById('hello1')
);
</script>
</html>
代码说明
图片.png
运行结果
图片.png
