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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM