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. 永久关闭selinux | 防火墙
			
    关闭SELinux的两种方法 1 永久方法 – 需要重启服务器 修改/etc/selinux/config文件中设置SELINUX=disabled ,然后重启服务器. 2 临时方法 – 设置系统参数 ...
    
			
    2. 
						
  2. javascript一些比较难理解的知识点
			
    原文出处:https://segmentfault.com/a/1190000010371988 看了一下这篇文章,自己也手敲了一遍 //1. 立即执行函数 作用:将var变量的作用域限制于函数内,这 ...
    
			
    3. 
						
  3. ASP.NET From表单转实体类
			
    原由 经常遇到 int Age=Convert.ToInt32(this.txtAge.Text); 这种蛋疼的代码,特写次方法. 之所以抛出异常是希望知道转换失败,格式错误的属性是什么,方便调试.  ...
    
			
    4. 
						
  4. Spring框架Controller层(表现层)针对方法参数是Bean时HttpServletRequest绑定参数值问题解释
			
    在做项目的时候,有一个需求是将数据库中的信息封装到实体类返回到jsp界面 传过来的参数只是实体类的id属性,然后根据id属性去查数据库,事情就是这样,然后 结果遇到很奇怪的事情,在jsp页面中使用EL ...
    
			
    5. 
						
  5. 配置HAProxy支持https协议
			
    author:JevonWei 版权声明:原创作品 实现http重定向到https HAProxy 创建CA证书 [root@HAProxy ~]# cd /etc/haproxy/ [root@HA ...
    
			
    6. 
						
  6. 说说 DWRUtil
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp27 说说 DWRUtil 比如我们从服务器端获得了一个citylist的数 ...
    
			
    7. 
						
  7. 设置SQL Server 2005数据库使之可以远程连接
			
    1. 开启sql2005远程连接功能,开启办法如下: 配置工具->SQL Server外围应用配置器->服务和连接的外围应用配置器->打开MSSQLSERVER节点下的Databas ...
    
			
    8. 
						
  8. Java虚拟机的内存结构
			
    我们都知道虚拟机的内存划分了多个区域,并不是一张大饼.那么为什么要划分为多块区域呢,直接搞一块区域,所有用到内存的地方都往这块区域里扔不就行了,岂不痛快.是的,如果不进行区域划分,扔的时候确实痛快,可 ...
    
			
    9. 
						
  9. Membership ——入门基础
			
    Membership是ASP.NET为我们提供的一套验证和存储用户凭证的框架.它可以帮助我们快速的开发用户登录.管理以及权限验证相关的模块,很多人可能会说Membership开发起来确实很快,但是总是 ...
    
			
    10. 
						
  10. 自制裸眼3D图【推荐】
			
    Welcome to the World of Hidden 3D Stereograms.欢迎进入隐身3D图的世界! 网址:http://hidden-3d.com 裸眼立体图是什么? 立体图是立体 ...
    
			
    11.