如果你还没有使用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. 使用VMware克隆出来的新虚拟机无法联网-问题解决记录

    背景: 使用VMware克隆出来的新虚拟机无法联网,重启网卡出现如下图提示: 继续输入#ifup ens33 提示: ens33: unknown interface: No such device ...

  2. 强制停止及删除(卸载)Windows服务

    1. 安装服务: CMD 打开命令行窗口:C:\> 运行:"C:\Windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe& ...

  3. chromedriver 下载

    https://sites.google.com/a/chromium.org/chromedriver/downloads   百度网盘链接:https://pan.baidu.com/s/1nwL ...

  4. BRVAH(让RecyclerView变得更高效) (3)

    本文来自网易云社区 作者:吴思博 3 实现列表加载动画效果    3.1默认动画 我们只需将自建的 adapter 继承它对应满足需求的 Adapter,然后在 Activity 中实例化,通过ope ...

  5. mysql无法创建外键问题

    在阿里云上面安装配置了Mysql后,无法创建外键, 原因及解决方法: 选择InnoDB引擎,因为MyISAM引擎不支持外键,默默地说一句,MySQL真神奇

  6. [android开放篇] wifi-direct接口网址

    http://www.android-doc.com/guide/topics/connectivity/wifip2p.html

  7. hdu2087

    #include <stdio.h> #include <string.h> int main(){ int cnt,i,j,k; +],tmp[+]; int strl,tm ...

  8. shit layui & bugs

    shit layui & bugs use is not useful at all! http://www.layui.com/demo/form.html layui.use([" ...

  9. BZOJ3122 [Sdoi2013]随机数生成器 【BSGS】

    题目 输入格式 输入含有多组数据,第一行一个正整数T,表示这个测试点内的数据组数. 接下来T行,每行有五个整数p,a,b,X1,t,表示一组数据.保证X1和t都是合法的页码. 注意:P一定为质数 输出 ...

  10. 【树状数组区间修改区间求和】codevs 1082 线段树练习 3

    http://codevs.cn/problem/1082/ [AC] #include<bits/stdc++.h> using namespace std; typedef long ...