react组件 -- React.createClass()方法

最新推荐文章于 2024-10-14 12:24:37 发布

weixin_30586257

最新推荐文章于 2024-10-14 12:24:37 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/songmengyao/p/7117286.html

版权

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>;
}
});