react 创建组件 (一)createClass
如果你还没有使用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的更多相关文章
- react创建组件的几种方式及其区别
react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件 ③.es6形式的extends React.Component定义的组 ...
- React创建组件的不同方式(ES5 & ES6)
一. 首先缕清楚React.createElement.React.createClass.React.Component之间的关系 1. React.createElement(HTML eleme ...
- React创建组件的三种方式及其区别
内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...
- react 创建组件 (四)Stateless Functional Component
上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Compo ...
- React创建组件的三种方式比较
推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...
- react 创建组件 (二)component
因为ES6对类和继承有语法级别的支持,所以用ES6创建组件的方式更加优雅,下面是示例: import React from 'react'; class Greeting extends React. ...
- React创建组件的三种方式比较和入门实例
推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...
- React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组(列表)循环输出
接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...
随机推荐
- Python中单元测试出错了,会怎么样?
在上一篇中,我们看到了单元测试正常通过时的情况,如果我们边修改一下要测试的函数,然后再运行单元测试,会出现什么情况. 原say_hello_name.py def hello_name(name): ...
- POST一个多部分编码(Multipart-Encoded)的文件
Requests使得上传多部分编码文件变得很简单: >>> url = 'http://httpbin.org/post' >>> files = {'file': ...
- JAVA复制
复制 直接赋值 直接赋值.在 Java 中, A a1 = a2,我们需要理解的是这实际上复制的是引用,也就是说 a1 和 a2 指向的是同一个对象.因此,当 a1 变化的时候, a2 里面的成员变量 ...
- mysql参数讲解
MySQL配置参数详解: http://blog.csdn.net/wlzx120/article/details/52301383 深入理解mysql参数 http://blog.itpub.net ...
- goland 快键键整理及注册
https://my.oschina.net/lemos/blog/1358731 http://idea.lanyus.com/
- 关于加号传递到后端会变为空格的c#例子
参考博客:http://blog.csdn.net/nsdnresponsibility/article/details/50965262 以前在一次传递参数的情况中遇到,特此记录一下. 之前传递的参 ...
- 16,re模块的常用方法
ret =re.findall('\d+', 'eva123egon4yuan567') print(ret)#返回满足条件的结果 ,放在一个列表里. ret2 = re.search('\d+',' ...
- 如何反馈问题issue?
如何反馈问题issue? 01,请提交的时候换位思考一下:如果别人给你提交一个这样的 Issue,你能快速准确的理解吗?如果不能,烦请重新整理你的语言,按照要求的格式填写.专业一点,减少不必要的口舌浪 ...
- 九度oj 题目1131:合唱队形
题目描述: N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学不交换位置就能排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1, 2, …, K,他们 ...
- BZOJ 4128 Matrix ——BSGS
矩阵的BSGS. 只需要哈希一下存起来就可以了. 也并不需要求逆. #include <map> #include <cmath> #include <cstdio> ...