如果你还没有使用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中单元测试出错了,会怎么样?

    在上一篇中,我们看到了单元测试正常通过时的情况,如果我们边修改一下要测试的函数,然后再运行单元测试,会出现什么情况. 原say_hello_name.py def hello_name(name): ...

  2. POST一个多部分编码(Multipart-Encoded)的文件

    Requests使得上传多部分编码文件变得很简单: >>> url = 'http://httpbin.org/post' >>> files = {'file': ...

  3. JAVA复制

    复制 直接赋值 直接赋值.在 Java 中, A a1 = a2,我们需要理解的是这实际上复制的是引用,也就是说 a1 和 a2 指向的是同一个对象.因此,当 a1 变化的时候, a2 里面的成员变量 ...

  4. mysql参数讲解

    MySQL配置参数详解: http://blog.csdn.net/wlzx120/article/details/52301383 深入理解mysql参数 http://blog.itpub.net ...

  5. goland 快键键整理及注册

    https://my.oschina.net/lemos/blog/1358731 http://idea.lanyus.com/

  6. 关于加号传递到后端会变为空格的c#例子

    参考博客:http://blog.csdn.net/nsdnresponsibility/article/details/50965262 以前在一次传递参数的情况中遇到,特此记录一下. 之前传递的参 ...

  7. 16,re模块的常用方法

    ret =re.findall('\d+', 'eva123egon4yuan567') print(ret)#返回满足条件的结果 ,放在一个列表里. ret2 = re.search('\d+',' ...

  8. 如何反馈问题issue?

    如何反馈问题issue? 01,请提交的时候换位思考一下:如果别人给你提交一个这样的 Issue,你能快速准确的理解吗?如果不能,烦请重新整理你的语言,按照要求的格式填写.专业一点,减少不必要的口舌浪 ...

  9. 九度oj 题目1131:合唱队形

    题目描述: N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学不交换位置就能排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1, 2, …, K,他们 ...

  10. BZOJ 4128 Matrix ——BSGS

    矩阵的BSGS. 只需要哈希一下存起来就可以了. 也并不需要求逆. #include <map> #include <cmath> #include <cstdio> ...