eact组件 -- 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 lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var TestClickComponent=React.createClass({
handleClick:function(event){
var tipE=this.refs.tip;
if(tipE.style.display==="none"){
tipE.style.display="inline";
}else{
tipE.style.display="none";
}
event.stopPropagation();
event.preventDefault();
},
render:function(){
return(
<div>
<button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span>
</div>
);
}
});
var TestInputComponent=React.createClass({
getInitialState:function(){
return {
inputContent:""
}
},
changeHandler:function(event){
this.setState({
inputContent:event.target.value
});
event.stopPropagation;
event.preventDefault;
},
render:function(){
return(
<div>
<input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
</div>
)
}
});
ReactDOM.render(
<div>
<TestClickComponent/>
<br/>
<TestInputComponent/>
</div>,
document.getElementById("container"))
</script>
</body>
</html>
本篇代码,先是创建了一个测试点击组件,再创建了一个测试input组件。分别定义了组件的render方法。和相应的事件方法。应该注意到无论是在组件的render函数中,还是在ReactDOM的render函数中,都是有一个根节点将其他节点包起来的。
结果页面: