如果你还没有使用ES6语法,那么定义组件,只能使用React.createClass这个helper来创建组件,下面是一段示例:

  1. var React = require("react");
  2. var Greeting = React.createClass({
  3.  
  4. propTypes: {
  5. name: React.PropTypes.string //属性校验
  6. },
  7.  
  8. getDefaultProps: function() {
  9. return {
  10. name: 'Mary' //默认属性值
  11. };
  12. },
  13.  
  14. getInitialState: function() {
  15. return {count: this.props.initialCount}; //初始化state
  16. },
  17.  
  18. handleClick: function() {
  19. //用户点击事件的处理函数
  20. },
  21.  
  22. render: function() {
  23. return <h1>Hello, {this.props.name}</h1>;
  24. }
  25. });
  26. module.exports = Greeting;

这段代码,包含了组件的几个关键组成部分,这种方式下,组件的props、state等都是以对象属性的方式组合在一起,其中默认属props和初始state都是返回对象的函数,propTypes则是个对象。这里还有一个值得注意的事情是,在createClass中,React对属性中的所有函数都进行了this绑定,也就是如上面的hanleClick其实相当于handleClick.bind(this) 。

react 创建组件 (一)createClass的更多相关文章

  1. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

  2. React创建组件的不同方式(ES5 & ES6)

    一. 首先缕清楚React.createElement.React.createClass.React.Component之间的关系 1. React.createElement(HTML eleme ...

  3. React创建组件的三种方式及其区别

    内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...

  4. react 创建组件 (四)Stateless Functional Component

    上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Compo ...

  5. React创建组件的三种方式比较

    推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...

  6. react 创建组件 (二)component

    因为ES6对类和继承有语法级别的支持,所以用ES6创建组件的方式更加优雅,下面是示例: import React from 'react'; class Greeting extends React. ...

  7. React创建组件的三种方式比较和入门实例

    推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...

  8. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  9. 四、React创建组件、 JSX使用、绑定数据、引用图片方式、数组(列表)循环输出

    接:https://www.cnblogs.com/chenxi188/p/11702799.html 用上节建好的my-app项目: my-app/ README.md node_modules/ ...

随机推荐

  1. (转) 苹果所有常用证书,appID,Provisioning Profiles配置说明及制作图文教程(精)

    原文地址:http://blog.csdn.net/holydancer/article/details/9219333 概述: 苹果的证书繁锁复杂,制作管理相当麻烦,今天决定重置一个游戏项目中的所有 ...

  2. Java-从字符串或一个子字符串中搜索一个字符

    indexOf函数 package com.tj; public class MyClass implements Cloneable { public static void main(String ...

  3. php 注册与登录

    <body background="timg.jpg"><div class="dak"> <div class="zu ...

  4. 卷积层feature map输出到文本

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/52166388 以VGG_16的网络为例 ...

  5. poj2104&&poj2761 (主席树&&划分树)主席树静态区间第k大模板

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 43315   Accepted: 14296 Ca ...

  6. SPOJ-Matrices with XOR property,暴力打表!

    Matrices with XOR property 应该先去看看这题的,补题的时候发现这题其实挺简单的.. 题意:n*m的格子用1-n*m的数去填,要求如果一个格子(i1,j1)与另外一个格子(i2 ...

  7. redis介绍和安装和主从介绍(二)

    redis正式安装过程 安装依赖,下载解压,编译安装 yum install gcc-c++ tcl wget http://download.redis.io/releases/redis-4.0. ...

  8. SPOJ GSS5 Can you answer these queries V ——线段树

    [题目分析] GSS1上增加区间左右端点的限制. 直接分类讨论就好了. [代码] #include <cstdio> #include <cstring> #include & ...

  9. USACO Party Lamps

    题目大意:一排灯有n个,有4种开关,每种开关能改变一些灯现在的状态(亮的变暗,暗的变亮)现在已知一些灯的亮暗情况,问所以可能的情况是哪些 思路:同一种开关开两次显然是没效果的,那么枚举每个开关是否开就 ...

  10. P2016 战略游戏 (树形DP)

    题目描述 Bob喜欢玩电脑游戏,特别是战略游戏.但是他经常无法找到快速玩过游戏的办法.现在他有个问题. 他要建立一个古城堡,城堡中的路形成一棵树.他要在这棵树的结点上放置最少数目的士兵,使得这些士兵能 ...