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/ ...
随机推荐
- JQuery中xxx is not a function或者can not find $
在项目中,遇到以上两个错误,反复折腾了好久,js代码写得没有问题,jquery的文件也引入了,就是反复的报告错误,xxx is not a function.如图: 就是这样的错误,shake is ...
- HTML、CSS知识点总结_D
一,html+css基础 1-1 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTM ...
- printf和scanf中的%控制
输出函数的格式字符:printf(): 附加的格式说明符: 格式输入函数的格式控制符:scanf(): 版权声明:本文为博主原创文章,未经博主允许不得转载.
- SQL Server on Red Hat Enterprise Linux
本文从零开始一步一步介绍如何在Red Hat Enterprise Linux上搭建SQL Server 2017,包括安装系统.安装SQL等相关步骤和方法(仅供测试学习之用,基础篇). 一. 创 ...
- 关于hadoop学习的思考(一) —— 小的知识点的总结
一.对于CDH的小总结: CDH:是Cloudera公司在Apache开源项目hadoop的基础上发型的,共有五个版本前两个已不再更新,最经的两个分别是CDH4(基于hadoop2.0.0版本演化而来 ...
- vue 判断属性是否为object
//递归对象 var recursiveObject = Vue.extend({ name: 'recursive-object', template:[ '<ul>', '<li ...
- python 多线程、多进程、协程性能对比(以爬虫为例)
基本配置:阿里云服务器低配,单核2G内存 首先是看协程的效果: import requests import lxml.html as HTML import sys import time impo ...
- vim 第三章 插入模式
vim 第三章 插入模式 在普通模式下可以删除 复制 及粘贴的命令 在插入模式下也存在以中方便快捷的方式 能够粘贴寄存器中文本 两种方式来插入键盘上不存在的非常用字符 替换模式 ...
- JavaWeb基础(HTML)
代码改变世界 HTML HTML是指超本标记语言,它不是编程语言,而是一种标记语言.标记语言是一套标记标签,HTML使用标记标签来描述网页,用以定义如何在页面上展示信息. 1.HTML标签 HTML标 ...
- 【bzoj4197】[Noi2015]寿司晚宴 分解质因数+状态压缩dp
题目描述 为了庆祝 NOI 的成功开幕,主办方为大家准备了一场寿司晚宴.小 G 和小 W 作为参加 NOI 的选手,也被邀请参加了寿司晚宴. 在晚宴上,主办方为大家提供了 n−1 种不同的寿司,编号 ...