首页 > 技术文章 > react组件 -- React.createClass()方法

songmengyao 2017-07-04 16:34 原文

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>

 

推荐阅读