所谓组件:即分装起来的具有独立功能的UI部件,React希望我们能够将UI组件化,一个功能一个组件,最后通过组合或者嵌套的方式组成一个大的组件,完成UI搭建。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
<script src="../lib/react.js"></script>
<script src="../lib/react-dom.min.js"></script>
<script src="../lib/browser.min.js"></script>
<style>
.alert-text{
font-size: 20px;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
{/* 定义一个组件 */}
var HelloMessage = React.createClass({
render: function() {
var styleObj = {
color:"blue",
fontSize:40,
fontWeight:"normal"
}
{/*style={{color:'red'}}*/}
return <h1 style={styleObj} className="alert-text">Hello {this.props.name} {this.props.title}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" title="smith"/>,
document.getElementById('example')
);
</script>
</body>
</html>
1、分装组件(component)
这段代码中就封装了一个名叫‘HelloMessage’的组件。
提示:组件的命名规范:
1. 首写字母大写
2. 采用驼峰命名法
3. 见名知义
var HelloMessage = React.createClass({
render:function(){
return <div></div>
}
});
ReactDOM.render(
<HelloMessage/>,
document.getElementById();
);
最基本组件创建和渲染的方式。
2、React中如何定义css样式
- 内部样式
<style>
.alert-text{
font-size: 20px;
}
</style>
<h1 style={styleObj} className="alert-text">Hello {this.props.name} {this.props.title}</h1>;
这边注意在命名class名时,使用className而不是class.
2.内联样式
{/*style={{color:'red'}}*/}
需要两个大括号表示键值对,值是字符串的话需要用引号。(一个大括号表示书写表达式)
3.定义样式对象
var styleObj = {
color:"blue",
fontSize:40,
fontWeight:"normal"
}
在jsx中定义样式对象。
style={styleObj}
表达式的形式来引用css样式。