如果你还没有使用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. (转)UILabel常用属性

    Java代码 收藏代码 #import "ViewController.h" #import <CoreText/CoreText.h> @interface View ...

  2. MPEG-4视频编码核心思想

    1 引言   当今时代,信息技术和计算机互联网飞速发展,在此背景下,多媒体信息已成为人类获取信息的最主要载体,同时也成为电子信息领域技术开发和研究的热点.多媒体信息经数字化处理后具有易于加密.抗干扰能 ...

  3. 记如何解决蓝桥杯中to_string和atoi等无法使用的问题

    #include<iostream> #include<sstream> using namespace std; int main() {   // int 转 string ...

  4. 【MySQL】浅谈 varchar(N)

    一  前言  varchar(N) N代表什么意思,能存放多少个中文字符?属于老生常谈的问题了,今天又被一个开发同事问我关于这个问题,索性写一篇文章来具体介绍一下.二 理论知识 先说明一下 MySQL ...

  5. cf886d Restoration of string

    明确几点 假设有串 ab,那么 a 后头必须是 b,b 前头必须是 a,否则就不是最频繁的了. 不可成环,aba是非法的. #include <iostream> #include < ...

  6. luogu1879 [USACO06NOV]玉米田Corn Fields

    学习位运算 #include <iostream> #include <cstdio> using namespace std; int n, m, dp[15][4105], ...

  7. json分享

    JSON是什么? JavaScript Object Notation (JSON) is a text format for the serialization of structured data ...

  8. python3--命名空间字典

    命名空间字典 我们学到了模块的命名空间实际上是以字典的形式实现的,并且可以由内置属性__dict__显示这一点.类和实例对象也是如此:属性点号运算其实内部就是字典的索引运算,而属性继承其实就是搜索连结 ...

  9. Codeforces Round #307 (Div. 2)

    A. GukiZ and Contest time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  10. Tomcat基础配置(一)

    详情请看散尽浮华的tomcat相关配置技巧梳理 本次只用于自己的查看,谢谢作者的谅解. tomcat常用架构:1)nginx+tomcat:即前端放一台nginx,然后通过nginx反向代理到tomc ...