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. Struts2使用自定义拦截器导致Action注入参数丢失、url参数
			
    写struts2项目时发现前台超链接中的参数无法传到action, 所有带有传递参数的均无法正常使用了,在Action中所有的参数无法被注入. 后来经过debug发现其中的页面都要先经过拦截器,而后再 ...
    
			
    2. 
						
  2. 谈谈个人网站的建立（二）—— lucene的使用
			
    首先,帮忙点击一下我的网站http://www.wenzhihuai.com/ .谢谢啊,如果可以,GitHub上麻烦给个star,以后面试能讲讲这个项目,GitHub地址https://github ...
    
			
    3. 
						
  3. node.js后台快速搭建在阿里云（二）(pm2和nginx篇)
			
    前期准备 阿里云服务器 node.js pm2 express nginx linux(推荐教程:鸟哥的私房菜) 简介 嗯……我只是个前端而已 在第一部分说完了express篇. 后面继续项目的部署, ...
    
			
    4. 
						
  4. IO库
			
    IO类 C++语言不直接处理出入输出,而是通过一族定义在标准库中的类型来处理IO.这些类型支持从设备读取数据.向设备写入数据的IO操作,设备可以是文件 .控制台窗口 等.还有一些类型允许内存IO ,即 ...
    
			
    5. 
						
  5. MongoDB环境安装
			
    ---------------------MongoDB安装环境--------------------- 1.MongoDB下载地址:http://www.mongodb.org/downloads ...
    
			
    6. 
						
  6. informatica9 安装下载，安装教程 介质（文章和视频教程）（csdn讲师：Array）
			
    Informatica学习:  参考文献:视频参考地址:http://edu.csdn.net/course/detail/5034,ETL之informatica9通关班(第二期) 1.安装介质的获 ...
    
			
    7. 
						
  7. 归并排序Java实现
			
    package practice; import edu.princeton.cs.algs4.*; /* * 归并排序 * 时间复杂度O(NlgN) N为数组长度 * 归并排序在小数组上表现并不好可 ...
    
			
    8. 
						
  8. SessionStateMode之SQL Server共享session
			
    分布式应用首先要解决的是跨域的问题,解决session.frame.cookie的跨域是最基本的,然后才是负载均衡和性能优化,上面的不解决就没法往后面进行.上一博客主要是解决了frame跨域的问题,今 ...
    
			
    9. 
						
  9. 一起来学linux：shell script(一)关于变量
			
    p { margin-bottom: 0.25cm; line-height: 120% } (一)首先来看什么是变量,在shell中打印出变量采用的是echo $path或者echo ${path} ...
    
			
    10. 
						
  10. 字符串和转为Data类型前后几天
			
    以防忘记:SimpleDateFormat 可以设置字符串的格式 package com.apploft.util.lang;import java.text.SimpleDateFormat;imp ...
    
			
    11.