2.2使用类创建组件

类组件:使用ES6的class创建的组件

约定1:类组件必须以大写字母开头

约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性

约定3:组件必须提供render方法

约定4:render方法必须有返回值

//导入react
    import React from "react"
     
    import ReactDOM from "react-dom"
     
    // 约定1:类组件必须以大写字母开头
     
    // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
     
    // 约定3:组件必须提供render方法
     
    // 约定4:render方法必须有返回值
     
    class Hello extends React.Component{
        render(){
            return(
                <div>这是我的第一个类组件</div>
            )
        }
    }
     
     
    ReactDOM.render(<Hello/>,document.getElementById("root"))

运行结果

好客租房22-react组件的两种创建方式(类组件)的更多相关文章

  1. 好客租房21-react组件的两种创建方式(函数组件)

    1使用函数创建组件 函数组件:使用js的函数或者箭头函数创建的组件 约定1:函数组件名称必须以 开头 约定2:函数组件必须有返回值 表示该组件的结构 如果返回值为null 表示不渲染任何内容 2.1使 ...

  2. 好客租房23-react组件的两种创建方式(抽离为独立js)

    2.3抽离为单独组件 组件作为一个单独的个体,一般把每个组件放在单独的js中文件中 1创建hello.js 2在hello.js中导入React 3创建组件(函数或者类) hello.js子组件 // ...

  3. Django-多对多关系的三种创建方式-forms组件使用-cookie与session-08

    目录 表模型类多对多关系的三种创建方式 django forms 组件 登录功能手写推理过程 整段代码可以放过来 forms 组件使用 forms 后端定义规则并校验结果 forms 前端渲染标签组件 ...

  4. django----多对多三种创建方式 form组件

    目录 多对多三种创建方式 全自动 全手动 半自动 form组件 基本使用 form_obj 及 is_valid() 前端渲染方式 取消前端自动校验 正则校验 钩子函数(Hook方法) cleaned ...

  5. 【转载】 Java中String类型的两种创建方式

    本文转载自 https://www.cnblogs.com/fguozhu/articles/2661055.html Java中String是一个特殊的包装类数据有两种创建形式: String s ...

  6. String变量的两种创建方式

    在java中,有两种创建String类型变量的方式: String str01="abc";//第一种方式 String str02=new String("abc&qu ...

  7. Android中Fragment的两种创建方式

    fragment是Activity中用户界面的一个行为或者是一部分.你可以在一个单独的Activity上把多个Fragment组合成为一个多区域的UI,并且可以在多个Activity中再使用.你可以认 ...

  8. cocos2dx 帧动画的两种创建方式

    看了好几天cocos2dx的帧动画,现在才有点眉目,为了高效期间我们一般会用到 精灵帧缓存(CCSpriteFrameCache) 和动画缓存(CCAnimationCache) .大体的操作步骤: ...

  9. java多线程总结一:线程的两种创建方式及优劣比较

    1.通过实现Runnable接口线程创建 (1).定义一个类实现Runnable接口,重写接口中的run()方法.在run()方法中加入具体的任务代码或处理逻辑. (2).创建Runnable接口实现 ...

随机推荐

  1. H5打造3d场景不完全攻略(一): H5 3d表现形式

    前言 日前,taobao造物节H5放肆地火了一把.相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到.工作之余体验了若干个3d H5页面,感觉这类的H5互动体验性明显要比普通的要强,把二维的 ...

  2. Idea运行时Scala报错Exception in thread "main" java.lang.NoSuchMethodError:com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;Ljava/lang/Object;)V

    一.情况描述 使用idea +scala+spark,运行程序代码如下: package cn.idcast.hello import org.apache.spark.rdd.RDD import ...

  3. SQL语句总结---数据库操作

    https://blog.csdn.net/hallomrzhang/article/details/85010014 数据库操作 查看所有数据库 show databases; 1 查看当前使用的数 ...

  4. Restful-API和传统API的对比

    阮一峰 RestFul-API 详解链接:  http://www.ruanyifeng.com/blog/2014/05/restful_api.html 举例,传统api设计: 举例,RestFu ...

  5. java JDK的安装和环境配置(windows10)

    1.下载JDK,安装.http://www.oracle.com/technetwork/java/javase/archive-139210.html   下载地址 2.配置JDK. (右键我的电脑 ...

  6. Python入门-面向对象-装饰器

    1.变量作用域 全局变量和局部变量 #变量是有作用域的,分为全局变量和局部变量 num = 100 #这是全局变量 def change(): """ 查看变量作用域 & ...

  7. golang 中 sync.Mutex 的实现

    mutex 的实现思想 mutex 主要有两个 method: Lock() 和 Unlock() Lock() 可以通过一个 CAS 操作来实现 func (m *Mutex) Lock() { f ...

  8. pip:带你认识一个 Python 开发工作流程中的重要工具

    摘要:许多Python项目使用pip包管理器来管理它们的依赖项.它包含在Python安装程序中,是Python中依赖项管理的重要工具. 本文分享自华为云社区<使用Python的pip管理项目的依 ...

  9. asp.net core启动源码以及监听,到处理请求响应的过程

    摘要 asp.net core发布至今已经将近6年了,很多人对于这一块还是有些陌生,或者说没接触过:接触过的,对于asp.net core整个启动过程,监听过程,以及请求过程,响应过程也是一知半解,可 ...

  10. 图片杂乱无章、分享麻烦?HMS Core图片分类服务教你快速筛选、分类、整合相册

    如今手机摄影越来越方便,随手一拍就能记录美好生活.但照片越多,整理越麻烦,有的时候我们想对照片进行二次加工.分享,需要不停翻找相册.HMS Core机器学习服务(ML Kit)提供了图片分类服务,方便 ...