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的第十天(内置算法:列表数据类型,元祖数据类型,字典数据类型)
5.8自我总结 1.列表类型内置算法 1.必须掌握 1.按索引取值(正向取值+反向取值),即可存也可以取 #用于取其中一个值 name = ['yang','wen','yi'] ##正方向取wen, ...
- 【练习】reserving.kr 之Direct3D FPS
算法函数如图,关键点在标志处,加密字符串如下图 于是写如下脚本: flag_c='436B666B62756C694C455C455F5A461C07252529701734390116494C201 ...
- 【HIHOCODER 1067】最近公共祖先·二(LCA)
描述 上上回说到,小Hi和小Ho用非常拙劣--或者说粗糙的手段山寨出了一个神奇的网站,这个网站可以计算出某两个人的所有共同祖先中辈分最低的一个是谁.远在美国的他们利用了一些奇妙的技术获得了国内许多人的 ...
- JavaScript脚本在页面中放置的位置
JavaScript脚本通常放置在三个位置: 1.head部分JavaScript脚本. 2.body部分JavaScript脚本. 3.单独以.js结尾的文件中的JavaScript脚本. 客户端会 ...
- Spring,Mybatis,Springmvc框架整合项目(第三部分)
一.静态资源不拦截 第二部分最后显示的几个页面其实都加载了css和js等文件,要不然不会显示的那么好看(假装好看吧),前面已经说了,我们在web.xml中配置了url的拦截形式是/,那么Dispatc ...
- linux 环境下bash脚本中找不到命令
mr.sh: line 1: HADOOP_CMD: command not found mr.sh: line 4: INPUT_FILE_PATH: command not found mr.sh ...
- 【04】在 PR 中关闭 issue
[04]在 PR 中关闭 issue 似乎要给别人PR. 比如你在创建一个 pull request 去修复 issue #234.那你可在 PR 输入「fixes #234」,就可以自动 ...
- loj2143 「SHOI2017」组合数问题
大傻逼题--就是求 \(nk\) 个元素选出一些元素,选出的元素的个数要满足模 \(k\) 余 \(r\),求方案数. 想到 \(\binom{n}{m}=\binom{n-1}{m-1}+\bino ...
- 【LeetCode】Powerful Integers(强整数)
这道题是LeetCode里的第970道题. 题目描述: 给定两个正整数 x 和 y,如果某一整数等于 x^i + y^j,其中整数 i >= 0 且 j >= 0,那么我们认为该整数是一个 ...
- Python --链接Mongodb
# -*- coding: UTF-8 -*- from pymongo import MongoClient # 数据库连接 class MongoDB(object): def __init__( ...