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/ ...
随机推荐
- (转) 苹果所有常用证书,appID,Provisioning Profiles配置说明及制作图文教程(精)
原文地址:http://blog.csdn.net/holydancer/article/details/9219333 概述: 苹果的证书繁锁复杂,制作管理相当麻烦,今天决定重置一个游戏项目中的所有 ...
- Java-从字符串或一个子字符串中搜索一个字符
indexOf函数 package com.tj; public class MyClass implements Cloneable { public static void main(String ...
- php 注册与登录
<body background="timg.jpg"><div class="dak"> <div class="zu ...
- 卷积层feature map输出到文本
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/52166388 以VGG_16的网络为例 ...
- poj2104&&poj2761 (主席树&&划分树)主席树静态区间第k大模板
K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Submissions: 43315 Accepted: 14296 Ca ...
- SPOJ-Matrices with XOR property,暴力打表!
Matrices with XOR property 应该先去看看这题的,补题的时候发现这题其实挺简单的.. 题意:n*m的格子用1-n*m的数去填,要求如果一个格子(i1,j1)与另外一个格子(i2 ...
- redis介绍和安装和主从介绍(二)
redis正式安装过程 安装依赖,下载解压,编译安装 yum install gcc-c++ tcl wget http://download.redis.io/releases/redis-4.0. ...
- SPOJ GSS5 Can you answer these queries V ——线段树
[题目分析] GSS1上增加区间左右端点的限制. 直接分类讨论就好了. [代码] #include <cstdio> #include <cstring> #include & ...
- USACO Party Lamps
题目大意:一排灯有n个,有4种开关,每种开关能改变一些灯现在的状态(亮的变暗,暗的变亮)现在已知一些灯的亮暗情况,问所以可能的情况是哪些 思路:同一种开关开两次显然是没效果的,那么枚举每个开关是否开就 ...
- P2016 战略游戏 (树形DP)
题目描述 Bob喜欢玩电脑游戏,特别是战略游戏.但是他经常无法找到快速玩过游戏的办法.现在他有个问题. 他要建立一个古城堡,城堡中的路形成一棵树.他要在这棵树的结点上放置最少数目的士兵,使得这些士兵能 ...