好客租房22-react组件的两种创建方式(类组件)
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组件的两种创建方式(类组件)的更多相关文章
- 好客租房21-react组件的两种创建方式(函数组件)
1使用函数创建组件 函数组件:使用js的函数或者箭头函数创建的组件 约定1:函数组件名称必须以 开头 约定2:函数组件必须有返回值 表示该组件的结构 如果返回值为null 表示不渲染任何内容 2.1使 ...
- 好客租房23-react组件的两种创建方式(抽离为独立js)
2.3抽离为单独组件 组件作为一个单独的个体,一般把每个组件放在单独的js中文件中 1创建hello.js 2在hello.js中导入React 3创建组件(函数或者类) hello.js子组件 // ...
- Django-多对多关系的三种创建方式-forms组件使用-cookie与session-08
目录 表模型类多对多关系的三种创建方式 django forms 组件 登录功能手写推理过程 整段代码可以放过来 forms 组件使用 forms 后端定义规则并校验结果 forms 前端渲染标签组件 ...
- django----多对多三种创建方式 form组件
目录 多对多三种创建方式 全自动 全手动 半自动 form组件 基本使用 form_obj 及 is_valid() 前端渲染方式 取消前端自动校验 正则校验 钩子函数(Hook方法) cleaned ...
- 【转载】 Java中String类型的两种创建方式
本文转载自 https://www.cnblogs.com/fguozhu/articles/2661055.html Java中String是一个特殊的包装类数据有两种创建形式: String s ...
- String变量的两种创建方式
在java中,有两种创建String类型变量的方式: String str01="abc";//第一种方式 String str02=new String("abc&qu ...
- Android中Fragment的两种创建方式
fragment是Activity中用户界面的一个行为或者是一部分.你可以在一个单独的Activity上把多个Fragment组合成为一个多区域的UI,并且可以在多个Activity中再使用.你可以认 ...
- cocos2dx 帧动画的两种创建方式
看了好几天cocos2dx的帧动画,现在才有点眉目,为了高效期间我们一般会用到 精灵帧缓存(CCSpriteFrameCache) 和动画缓存(CCAnimationCache) .大体的操作步骤: ...
- java多线程总结一:线程的两种创建方式及优劣比较
1.通过实现Runnable接口线程创建 (1).定义一个类实现Runnable接口,重写接口中的run()方法.在run()方法中加入具体的任务代码或处理逻辑. (2).创建Runnable接口实现 ...
随机推荐
- PID算法原理 一图看懂PID的三个参数
找了好久这一篇算是很容易看懂的了 推荐给大家 写的十分清楚 原文作者DF创客社区virtualwiz LZ以前有个小小的理想,就是让手边的MCU自己"思考"起来,写出真正 ...
- Numpy实现多项式曲线拟合
Numpy实现多项式曲线拟合 这里可以对比matlab中的拟合方式看看matlab拟合函数的三种方法,和第一种方式很像 问题定义:对于一堆数据点(x, y),能否只根据这些数据,找出一个函数,使得函数 ...
- centos下用ffmpeg推流宇视科技摄像头rtsp流到前端播放(无flash)
严禁垃圾中文技术网站复制粘贴 流程:安装SRS服务接收ffmpeg的推流,SRS会提供一个flv的播放地址,前端通过fls.js播放即可,无需flash. 1.安装ffmpeg 提供两个版本,都能推流 ...
- Top 15 - Material Design框架和类库(译)
_Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...
- 手把手教你从零写一个简单的 VUE--模板篇
教程目录1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 Hello,我又回来了,上一次的文章教会了大家如何书写一个简单 VUE,里面实现了VUE 的数据驱动视图 ...
- python爬虫---爬取王者荣耀全部皮肤图片
代码: import requests json_headers = { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win ...
- .NET程序设计实验三
实验三 Windows 应用程序开发 一.实验目的 1. 掌握窗口控件的使用方法: 2. 掌握Windows 的编程基础. 二.实验要求 根据要求,编写 C#程序,并将程序代码和运行结果写入实验报告 ...
- js 生成 pdf 文件
话不多说好吧, 直接上demo图: 直接上代码好吧:(要引入的两个js 链接我放最后) <!DOCTYPE html> <html> <head> <met ...
- dotnet new 命令笔记
让dotnet new使用平台特定的目标,例如net6.0-windows10.0.19041.0 dotnet new console --name CallWinRTConsole --frame ...
- Hadoop-集群运行
目录 步骤一.NameNode 格式化 步骤二.启动 NameNode 步骤三.启动 SecondaryNameNode 步骤四.slave 启动 DataNode 步骤五.查看 HDFS 的报告 步 ...