React.createClass()

中文翻译 https://discountry.github.io/react/3.4K ( https://doc.react-china.org868 )

React支持组件的运用React.createClass 方法就用于生成一个组件类

下面这是一个用Reac.createClass写的一个DOM页面



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>


<script src="build/react.js"></script>
		<script src="build/react-dom.js"></script>
		<script type="text/javascript" src="build/browser.min.js">


</script>
	</head>
	<div id="esample">


</div>
	<body>
		<script type="text/babel">
			 var 	Hello=React.createClass({//定义组件的方法，首字母必须大写
			 	render:function(){
			 		return <h1> Hello {this.props.name}//必须只有一个标签
			 		</h1>;


}
		  });


ReactDOM.render(//值传参数
				<Hello name="React"/>, 
				document.getElementById("esample")


);


</script>
	</body>
</html>


 




我们修改几个地方看看React打死不能动的地方






我们从代码里面可以看出，当我们把VAR 后面的首字母H改成小写h可以看出控制台就会报错，我们由此知道声明后边的首字母必须大写；


上述的代码用React.createClass()封装了一组代码，组件名字为Hello


在调<Hello name="React">组件的属性可以在组件类的 this.props对象上获取


class的用法




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="build/react.js"></script>

        <script src="build/react-dom.js"></script>

        <script type="text/javascript" src="build/browser.min.js">

        </script>

        <style type="text/css">

            .red{

                color: red;

            }

        </style>

    </head>

    <div id="esample">

    </div>

    <body>

        <script type="text/babel">

             var     Hello=React.createClass({//定义组件的方法，首字母必须大写

                 render:function(){

                     return <h1 className="red"> Hello {this.props.name}</h1>;

                        // className首字母要小写

                }

          });

            ReactDOM.render(//值传参数

                <Hello name="React"/>,

                document.getElementById("esample")

            );

    </script>

    </body>

</html>




效果




React.createClass




<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="build/react.js"></script>

		<script src="build/react-dom.js"></script>

		<script type="text/javascript" src="build/browser.min.js">

		</script>

	</head>

	<div id="esample">

	</div>

	<body>

		<script type="text/babel">

var Title=React.createClass({

	propTypes:{

		title:React.PropTypes.string.isRequired,

	},

	render:function(){

		return <h1>你好 {this.props.title}</h1>

		//此处定义的是字符串类型所以后面必须写出字符串类型

	}

});

ReactDOM.render(

	<Title title='123' />,

	//如这写123不加引号的话，控制台会报错

	document.getElementById('esample')

)

    </script>

	</body>

</html>





　　


上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。


如果我们把字符串的值换了我们看看浏览器报的错




此外，getDefaultProps 方法可以用来设置组件属性的默认值。我们把titel:里面的string类型改成number类型也可以显示
												


											
React的组件用法的更多相关文章
	

    
								
  1. 【react表格组件】material-table 基本用法 & 组件override
		
    教程: https://mbrn.github.io/material-table/#/ https://material-ui.com/api/table/ github: https://gith ...
    
		
    2. 
						
  2. 移动web端的react.js组件化方案
		
     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
    
		
    3. 
						
  3. React 学习(一) ---- React Element /组件/JSX
		
    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...
    
		
    4. 
						
  4. 你不可不知的 React Native 混合用法（Android 篇）
		
    前言 当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的"底蕴"无疑更深,拥 ...
    
		
    5. 
						
  5. React context基本用法
		
    React的context就是一个全局变量,可以从根组件跨级别在React的组件中传递.React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的 ...
    
		
    6. 
						
  6. React入门介绍（2）- React Component-React组件
		
    React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...
    
		
    7. 
						
  7. React的组件
		
    React的组件化思想尤为明显,一切皆组件,觉着比Vue的组件化思想更加凸显. const PacketBG = (props) =>( <div className="pack ...
    
		
    8. 
						
  8. react第二单元(react的组件-state-props-setState)
		
    第二单元(react的组件-state-props-setState) 课程目标 理解组件和组件的创建.以及能够根据实际场景去划分合理的组件. 理解并且能够灵活的应用组件中的state.props.  ...
    
		
    9. 
						
  9. Griddle, griddle-react 一个REACT 表格组件
		
    Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html
    
		
    10. 
		

	


随机推荐
	

    
									
  1. php sql uuid 32位
			
    最近表中id需要用到此值来作为唯一主键 其含义是通用唯一识别码.具体好处及应用可百度百科,链接给你https://baike.baidu.com/item/UUID/5921266?fr=aladdi ...
    
			
    2. 
						
  2. 解决VS2015中没有报表项(ReportViewer)的方法
			
    作者:何时.微笑成了种奢求 VS2015中没有报表项(ReportViewer),怎么办?这篇文章主要为大家详细介绍了解决VS2015中没有报表项(ReportViewer)的方法,感兴趣的小伙伴们可 ...
    
			
    3. 
						
  3. Linux企业运维人员最常用150个命令汇总
			
    命令 功能说明 线上查询及帮助命令(2个) man 查看命令帮助,命令的词典,更复杂的还有info,但不常用. help 查看Linux内置命令的帮助,比如cd命令. 文件和目录操作命令(18个) l ...
    
			
    4. 
						
  4. JavaScrpt笔记之第二天
			
    JavaScript正则表达式regex 1.郑则表达式是有一个字符序列形成的搜索模式. *语法:/正则表达式主题/修饰符(可选) *正则表达式修饰符:i部分大小写:g全局搜索:m多行匹配 *[abc ...
    
			
    5. 
						
  5. python 二进制转换
			
    #二进制装换msg = "大家好"msg1 = msg.encode(encoding='utf-8')#转换成二进制print(msg1)msg2 = msg1.decode(' ...
    
			
    6. 
						
  6. grep Pocket Reference读记
			
    1 简介 grep的基本命令格式如下:           grep [options] [regexp] [filename]   如果regexp中含有空格,应该使用单引号或双引号括起来.单引号和 ...
    
			
    7. 
						
  7. java 泛型简单使用
			
    
			
    8. 
						
  8. MyBatis框架——关系映射（一对多、多对多、多对一查询）
			
    关系映射 一.映射(多)对一.(一)对一的关联关系 1).使用列的别名 ①.若不关联数据表,则可以得到关联对象的id属性 ②.若还希望得到关联对象的其它属性.则必须关联其它的数据表 1.创建表: 员工 ...
    
			
    9. 
						
  9. zookeeper原理介绍
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt354 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,它 ...
    
			
    10. 
						
  10. 用CAS方案解决高并发一致性问题
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt395 缘起:在高并发的分布式环境下,对于数据的查询与修改容易引发一致性问题, ...
    
			
    11.