好客租房21-react组件的两种创建方式(函数组件)
1使用函数创建组件
函数组件:使用js的函数或者箭头函数创建的组件
约定1:函数组件名称必须以 开头
约定2:函数组件必须有返回值 表示该组件的结构
如果返回值为null 表示不渲染任何内容
2.1使用函数创建组件
1渲染函数组件:用函数名作为组件标签名
2组件标签可以是单标签也可以是多标签
//导入react
import React from "react"
import ReactDOM from "react-dom"
//约定1:函数组件名称必须以大写字母开头
//约定2:函数组件必须有返回值 表示该组件的结构
function Hello(){
return (
<div>Hello geyao</div>
)
}
ReactDOM.render(<Hello/>,document.getElementById("root"))
运行结果
好客租房21-react组件的两种创建方式(函数组件)的更多相关文章
- 好客租房22-react组件的两种创建方式(类组件)
2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必 ...
- 好客租房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接口实现 ...
随机推荐
- (stm32f103学习总结)—stm32外部中断
一.外部中断介绍 1.1 EXTI简介 EXTI简介 STM32F10x外部中断/事件控制器(EXTI)包含多达 20 个用于产生事 件/中断请求的边沿检测器.EXTI的每根输入线都可单独进行配置,以 ...
- html5 canvas基础10点
本文主要讲解下一些canvas的基础 1.<canvas id="canvas">若此浏览器不支持canvas会显示该文字</canvas> //创建个ht ...
- 体温填报app作业演示
今日学习 今天把这个体温填写app作业,做完了. 具体开发流程:https://www.cnblogs.com/yuxuan-light-of-Taihu-Lake/p/14362107.html 点 ...
- CCF201609-2火车购票
问题描述 请实现一个铁路购票系统的简单座位分配算法,来处理一节车厢的座位分配. 假设一节车厢有20排.每一排5个座位.为方便起见,我们用1到100来给所有的座位编号,第一排是1到5号,第二排是6到10 ...
- jquery 常用选择器和方法以及遍历(超详细)
jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...
- 【版本2020.03】使用idea导入maven项目
心得1:不同版本的idea,一些选项的名称稍微有点不同,比如以前导入项目的选项名称都是import Project,但是我使用的版本是2020.03 导入项目的名称是 import Settings ...
- 记-Golang日志文件读取及写入操作
Golang语言的 os 包中OpenFile 函数,如下所示: func OpenFile(name string, flag int, perm FileMode) (*File, error) ...
- Spring-aop注解开发(切点表达式的抽取)
接上一篇aop注解快速开发 @Component @Aspect //标注当前aspect是切面类 public class MyAspect { @Before("Pointcut()&q ...
- Spring框架技术
Spring框架技术 SSM(Spring+SpringMVC+Mybatis)阶段的学习,也算是成功出了Java新手村. 前面我们已经学习过Mybatis了. 从这里开始,很多的概念理解起来就稍微有 ...
- 帝国cms输出 自增数字 方法大全
帝国cms输出 自增数字 方法大全 1.帝国cms中调用序号 万能标签调用 使用:[!--no.num--] 标签模板: <li><span>[!--no.num--]< ...