如果你还没有使用ES6语法,那么定义组件,只能使用React.createClass这个helper来创建组件,下面是一段示例:

var React = require("react");
var Greeting = React.createClass({ propTypes: {
name: React.PropTypes.string //属性校验
}, getDefaultProps: function() {
return {
name: 'Mary' //默认属性值
};
}, getInitialState: function() {
return {count: this.props.initialCount}; //初始化state
}, handleClick: function() {
//用户点击事件的处理函数
}, render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
module.exports = Greeting;

这段代码,包含了组件的几个关键组成部分,这种方式下,组件的props、state等都是以对象属性的方式组合在一起,其中默认属props和初始state都是返回对象的函数,propTypes则是个对象。这里还有一个值得注意的事情是,在createClass中,React对属性中的所有函数都进行了this绑定,也就是如上面的hanleClick其实相当于handleClick.bind(this) 。

react 创建组件 (一)createClass的更多相关文章

  1. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

  2. React创建组件的不同方式(ES5 & ES6)

    一. 首先缕清楚React.createElement.React.createClass.React.Component之间的关系 1. React.createElement(HTML eleme ...

  3. React创建组件的三种方式及其区别

    内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...

  4. react 创建组件 (四)Stateless Functional Component

    上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Compo ...

  5. React创建组件的三种方式比较

    推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...

  6. react 创建组件 (二)component

    因为ES6对类和继承有语法级别的支持,所以用ES6创建组件的方式更加优雅,下面是示例: import React from 'react'; class Greeting extends React. ...

  7. React创建组件的三种方式比较和入门实例

    推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...

  8. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  9. 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组(列表)循环输出

    接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...

随机推荐

  1. Python之路-基础数据类型之字典 集合

    字典的定义-dict 字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对组成,字典是无序的,key是不可修改的.dic = {1:'好',2:'美',3:'啊'} 字典的操 ...

  2. pycharm的一些操作指令和技巧

    Alt+Enter 自动添加包Ctrl+t SVN更新Ctrl+k SVN提交Ctrl + / 注释(取消注释)选择的行Ctrl+Shift+F 高级查找Ctrl+Enter 补全Shift + En ...

  3. enq: TX - row lock contention“等待事件的处理

      enq: TX - row lock contention“等待事件的处理   session1: SQL> conn scott/triger Connected. SQL> CRE ...

  4. zoj 1760 Doubles

    Doubles Time Limit: 2 Seconds      Memory Limit: 65536 KB As part of an arithmetic competency progra ...

  5. Codeforces Round #305 (Div. 2) D. Mike and Feet

    D. Mike and Feet time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  6. hdu2063 二分图匹配,匈牙利算法

    #include <stdio.h> #include <string.h> int n1,n2,m,ans; ]; //记录V2中的点匹配的点的编号 ]; //记录V2中的每 ...

  7. System.TypeInitializationException

    在连接数据库时,提示System.TypeInitializationException 数据库的连接字符串放在config文件中,而config中有两个文件,起初放在debug.comfig中,启动 ...

  8. tomcat404

    确认目录下有我的html文件,但仍然是404. 问题一: 指定目录下没有访问的文件,这是最常见的,也是最容易解决的.只需要将访问的文件(如:a.html)放到指定目录下即可. 问题二: 将访问的文件( ...

  9. LightOJ——1012Guilty Prince(连通块并查集)

    1012 - Guilty Prince Time Limit: 2 second(s) Memory Limit: 32 MB Once there was a king named Akbar. ...

  10. BZOJ 2176 Strange string ——最小表示法

    本来想用来练习后缀自动机的,但是100w有点虚(事实证明确实T掉了). 只好上最小表示法. #include <cstdio> #include <cstring> #incl ...