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. python+selenium自动化软件测试(第5章)：Selenium Gird
			
    5.1 分布式(Grid) Selenium grid是用来分布式执行测试用例脚本的工具,比如测试人员经常要测试多浏览器的兼容性,那就可以用到grid了.下面就来介绍如何在多个浏览器上运行同一份脚本. ...
    
			
    2. 
						
  2. php 自己封装的一些函数
			
    手机归属地函数 function get_mobile_area($phone){ $sms = array('province'=>'', 'supplier'=>''); //初始化变 ...
    
			
    3. 
						
  3. 广度优先搜索（BFS）——迷宫的最短路径
			
    宽度优先搜索按照距开始状态由近到远的顺序进行搜索,因此可以很容易的用来求最短路径,最少操作之类问题的答案. 宽度优先搜索介绍(一篇不错的文章). 题目描述: 给定一个大小为N*M的迷宫.迷宫有通道和墙 ...
    
			
    4. 
						
  4. 对Appium的认识 get
			
    介绍 Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持iOS.Android及FirefoxOS平台测试.Appium使用WebDriver的json w ...
    
			
    5. 
						
  5. websocket实现简单聊天程序
			
    程序的流程图: 主要代码: 服务端 app.js 先加载所需要的通信模块: var express = require('express'); var app = express(); var htt ...
    
			
    6. 
						
  6. 10 Logistic Regression
			
    线性分类中的是非题 --->概率题 (设置概率阈值后,大于等于该值的为O,小于改值的为X) --->逻辑回归 O为1,X为0 逻辑回归假设 逻辑函数/S型函数:光滑,单调 自变量趋于负无穷 ...
    
			
    7. 
						
  7. JavaScript封装一个MyAlert弹出框
			
    平时我们想要显示一些提示信息时会用到alert方法,alert是全局的一个方法,会短暂的中断程序,我们主要用来显示提示客户信息.但是这个方法有一定的局限性,而且本身样式也不够美观.于是我封装了一个实用 ...
    
			
    8. 
						
  8. [转载]Word直接发布新浪博客（以Word 2013为例）
			
    原文地址:Word直接发布新浪博客(以Word 2013为例)作者:paulke2011 注意:这篇博客直接由Word 2013发出!这虽然也算是一个教程,但更多的是一个试验品. 老早就知道Word有 ...
    
			
    9. 
						
  9. JUnit之TestCase和TestSuite详解
			
    首先介绍下TestCase以及TestSuite.    TestCase:字面意思,测试用例.为一个或多个方法提供测试方法.一般是一个test    TestSuite:测试集合,即一组测试.一个t ...
    
			
    10. 
						
  10. 九度OJ 1013 开门人和关门人
			
    #include <iostream> #include <string.h> #include <sstream> #include <math.h> ...
    
			
    11.