react组件 -- React.createClass()方法
1、React.createClass()方法用于生成一个组件类
2、所有组件类都必须有自己的render方法,用于输出组件
3、假如生成一个组件类HelloMessage,模板插入<HelloMessage />时,会自动生成组件类HelloMessage的一个实例
4、组件类的第一个字母必须大写,否则会报错,比如HelloWorld,不能写成helloWorld
5、组件类里面只能包含一个顶层标签,否则会报错(组件类的render方法里面)
6、组件类对应的标签的用法和HTML标签的用法完全一致,可以加入任意的属性。假如生成一个组件类HelloMessage,其对应的组件标签就是<HelloMessage />,在这个标签里面可以加入普通的HTML标签的任意属性,例如:<HelloMessage name="小丸子"/>,就是给组件标签<HelloMessage />加入了一个name属性,值为“小丸子”
7、给组件标签添加属性时,需要注意两个地方,就是把class属性写成className,for属性写成htmlFor,这是因为class和for时JS里面的保留字
下面举一个例子:
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
</script>
</body>
</html>