React.createClass({})

最新推荐文章于 2024-02-29 11:54:03 发布

sliiva

最新推荐文章于 2024-02-29 11:54:03 发布

阅读量1.2k

点赞数 1

分类专栏： react 文章标签： react

react 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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函数中，都是有一个根节点将其他节点包起来的。

结果页面：

sliiva

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React.createClass({})

eact组件 -- React.createClass()方法1、React.createClass()方法用于生成一个组件类2、所有组件类都必须有自己的render方法，用于输出组件3、假如生成一个组件类HelloMessage，模板插入&lt;HelloMessage /&gt;时，会自动生成组件类HelloMessage的一个实例4、组件类的第一个字母必须大写，否则会报错，比...
复制链接

扫一扫