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. 《自动控制原理》个人笔记(来自ppt课件)

    控制的含义 控制(CONTROL)----某个主体使某个客体按照一定的目的动作.主体–人:人工控制: 机器:自动控制客体–指一件物体,一套装置,一个物化过程,一个特定系统. 人工控制与自动控制 人在控 ...

  2. 无人驾驶—高精地图和V2X

    高精地图将厘米级的静态信息传传递给无人车V2X将路况上的动态信息传递给无人车 高精地图的作用 高精地图与传统地图的对比 高精地图与定位的关系 上图左侧是感知到的区域,右侧是高精地图,之后进行拼接获得车 ...

  3. Python中查看变量的类型,内存地址,所占字节的大小

    查看变量的类型 #利用内置type()函数 >>> nfc=["Packers","49"] >>> afc=[" ...

  4. python中一切皆对象的理解

    一切皆对象? 学过Java都知道,Java中有8个基本类型,其余的都是继承自Object类的引用类型.方法内的基本类型变量会在栈上分配,而引用类型会通过逃逸分析来决定在栈上分配或堆上分配.Java中关 ...

  5. Mac 安装WordPress

    Mac 安装WordPress 一.环境要求 PHP 5.2.4或更新版本 MySQL 5.0或更新版本 WebServer(可以选择Apache.nginx等支持PHP的,这里我选择Apache) ...

  6. JS 中的日期时间操作计算实例

    实例 一:已知日期格式为 "YYYY/MM/DD",计算相对于今天的天数差. function fromNow(date){ var mTimes = new Date(date) ...

  7. for 循环详解

    学习目标: 掌握 for 循环的使用 学习内容: 1.for语法 for(初始化语句; boolean表达式; 循环后操作语句) { 循环体; } 流程图如下: 特点: 初始化语句:只在循环开始时执行 ...

  8. 基于nodejs中实现跨域的方法

    一般情况下跨域是通过ajax的方式请求数据,通过js在不同的域之间进行数据传输或者通信: 只有通过ajax方式获取请求的时候才会有跨域问题需要解决: 例如在本地模拟两个服务端. 一个服务端去通过aja ...

  9. Ubuntu16更换flatabulous主题

    Ubuntu16更换flatabulous主题 安装unity-tweak-tool sudo apt-get install unity-tweak-tool 安装flatabulous主题 sud ...

  10. Codeforces Round #710 (Div. 3) Editorial 1506A - Strange Table

    题目链接 https://codeforces.com/contest/1506/problem/A 原题 1506A - Strange Table Example input 5 1 1 1 2 ...