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/ ...
随机推荐
- 基础训练 Huffuman树
Huffuman树 /*解法一*/ #include<iostream> #include<queue> using namespace std; int main(){ pr ...
- redis和memcached的优缺点及区别
1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,li ...
- Hive 将本地数据导入hive表中
# 导入 load data local inpath '/root/mr/The_Man_of_Property.txt' insert into table article; # 提示 FAILE ...
- 网址导航[IT]
一.Linux/UNIX Linux公社:http://www.linuxidc.com/index.htm Linux命令大全:http://man.linuxde.net 伯乐在线:http:// ...
- kali2018利用ss和ProxyChains实现任意应用代理
第一步:配置ss 第二步:配置proxychain vim /etc/proxychains.conf 第三步:使用proxychains 终端输入: proxychains firefox 通过代理 ...
- hdu2043
#include <stdio.h> #include <string.h> char sign[]={'A','B','C','D','E','F','G','H','I', ...
- 83. Spring Boot 1.4单元测试【从零开始学Spring Boot】
在[27. Spring Boot Junit单元测试]中讲过1.3版本的单元测试方式,这里说说1.4和1.3有什么区别之处? 在1.3中单元测试这样子的类似代码: //// SpringJUnit支 ...
- 【Luogu】P1122最大子树和(DFS,树上DP)
题目链接 感觉自己DP好烂啊 道道看题解 钦定1为根,DFS搜索子树权值.如果子树权值大于0就将当前节点加上子树权值,反之就把子树扔掉.最后在所有节点的权值中寻找最优解. void dfs(int ...
- VIJOS 1889 天真的因数分解 ——莫比乌斯函数
同理BZOJ2440 二分答案,不过这次变成了统计含有平方因子的个数 #include <cmath> #include <cstdio> #include <cstri ...
- [luoguP1053] 篝火晚会(贪心 + 乱搞)
传送门 假设第一个位置是1,那么枚举它的左右两边是谁,有两种情况,然后可以递推求出序列. 然后可以贪心,两个序列有多少个不同的数,答案就是多少,具体为啥,yy一下即可 然后就是判断递推求出的序列和目标 ...