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. 数字电路的多路复用(MUX)

    学习文章:https://mp.weixin.qq.com/s/1pfLfvkAPyhEMLvfnyDy0g 最基本--2选1的MUX结构: 可以看作是:assign Y=S?B:A; 下面使用MUX ...

  2. 论文解读( N2N)《Node Representation Learning in Graph via Node-to-Neighbourhood Mutual Information Maximization》

    论文信息 论文标题:Node Representation Learning in Graph via Node-to-Neighbourhood Mutual Information Maximiz ...

  3. element el-tree、el-table组件加载数据前闪现 暂无数据 清除

    相信很多人在使用element  el-tree.el-table组件加载数据前会显示一个" 暂无数据 ",体验很不友好,有没有办法处理不显示呢?答案是:有的.废话不多说直接上代码 ...

  4. vue2.0开发聊天程序(八) 初步完成

    项目地址 服务器源码地址:https://github.com/ermu592275254/chat-socket 网页源码地址:https://github.com/ermu592275254/ch ...

  5. 利用angular4和nodejs-express构建一个简单的网站(七)—用户注册之ReactiveForm

    这一节对用户注册组件进行分析.用户注册组件主要涉及angular4表单的操作.Angular提供了两种构建表单的技术:响应式表单和模板驱动表单. 这两项技术都属于@angular/forms库,并且共 ...

  6. Android地图化实现

    今天在Android上实现了地图化,可以通过记录用户位置和体温是否异常来实现地图区域变色,并显示正常人数,与体温是否异常,且可以地图下钻. 效果展示:

  7. tomcat启动报错:A child container failed during start

    环境:maven3.3.9+jdk1.8+tomcat8.5 错误详细描述: 严重: A child container failed during start java.util.concurren ...

  8. java基础-java异常处理

    异常* A:异常的概述 * 异常就是Java程序在运行过程中出现的错误.* B:异常的分类 * Error:服务器宕机,数据库崩溃等 * ExceptionC:异常的继承体系  * Throwable ...

  9. git的下载安装以及基本操作

    版权声明:本文为CSDN博主「~李疆」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.转载原文链接:https://blog.csdn.net/qq_403232 ...

  10. Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found 解决办法

    问题 每次vs重启都提示安装证书,即使执行dotnet dev-certs https --clean,dotnet dev-certs https -t然后重启vs也不行. 环境 win10, vs ...