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. 自动化的基于TypeScript的HTML5游戏开发
			
    自动化的开发流程 在HTML5游戏开发或者说在Web客户端开发中,对项目代码进行修改之后,一般来说,需要手动刷新浏览器来查看代码修改后运行结果.这种手动的方式费时费力,降低了开发效率.另外,如果我们使 ...
    
			
    2. 
						
  2. 为shell布置陷阱：trap捕捉信号方法论
			
    本文目录: 1.1 信号说明 1.2 trap布置陷阱 1.3 布置完美陷阱必备知识 家里有老鼠,快消灭它!哎,又给跑了.老鼠这小东西跑那么快,想直接直接消灭它还真不那么容易.于是,老鼠药.老鼠夹子或 ...
    
			
    3. 
						
  3. 利用WHID为隔离主机建立隐秘通道
			
    0 引言 从2014年BADUSB出现以后,USB-HID攻击就这一直被关注,且具争议.争议的焦点是USB-HID的实战效果过于“鸡肋”,无论从早期的BADUSB,还是到后来的各种USB-HID设备, ...
    
			
    4. 
						
  4. myeclipse eclipse创建maven web项目时 index.jsp报错
			
    第一种办法 解决办法: ---------------------------------------------------------------------------------------- ...
    
			
    5. 
						
  5. 全平台轻量级 Verilog 编译器 & 仿真环境
			
    一直苦于 modelsim 没有Mac版本,且其体量过大,在学习verilog 时不方便使用. 终于找到一组轻量级且全平台 ( Linux+Windows+macOS ) 的编译仿真工具组. Icar ...
    
			
    6. 
						
  6. 动态创建angular组件实现popup弹窗
			
    承接上文,本文将从一个基本的angular启动项目开始搭建一个具有基本功能.较通用.低耦合.可扩展的popup弹窗(脸红),主要分为以下几步: 基本项目结构搭建 弹窗服务 弹窗的引用对象 准备作为模板 ...
    
			
    7. 
						
  7. HTTP请求响应机制与响应状态码
			
    转载来源:http://blog.csdn.net/xyw591238/article/details/51907143 HTTP协议 Internate的基本协议是TCP/IP(传输控制协议和网际协 ...
    
			
    8. 
						
  8. Vuforia开发完全指南---Vuforia概述
			
    Vuforia概述 AR(Augmented Reality)增强现实,想必大家都已经很熟悉了.这是当下最热的技术之一,是利用计算机视觉和计算机图像学领域的相关知识将虚拟世界融入到现实生活当中.AR和 ...
    
			
    9. 
						
  9. Spring Ioc DI 原理
			
    IOC(DI):其实这个Spring架构核心的概念没有这么复杂,更不像有些书上描述的那样晦涩.Java程序员都知道:java程序中的每个业务逻辑至少需要两个或以上的对象来协作完成,通常,每个对象在使用 ...
    
			
    10. 
						
  10. 201521123032 《Java程序设计》第8周学习总结
			
    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 在课堂上在老师 ...
    
			
    11.