好客租房23-react组件的两种创建方式(抽离为独立js)
2.3抽离为单独组件
组件作为一个单独的个体,一般把每个组件放在单独的js中文件中
1创建hello.js
2在hello.js中导入React
3创建组件(函数或者类)
hello.js子组件
//导入react
import React from "react"
//创建组件
class Hello extends React.Component{
render(){
return(
<div>这是我的第一个类组件</div>
)
}
}
//导出组件
export default Hello
父组件
//导入react
import React from "react"
import ReactDOM from "react-dom"
//导入组件
import Hello from "./Hello"
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
class HelloWorld extends React.Component{
render(){
return(
<Hello></Hello>
)
}
}
ReactDOM.render(<HelloWorld/>,document.getElementById("root"))
好客租房23-react组件的两种创建方式(抽离为独立js)的更多相关文章
- 好客租房21-react组件的两种创建方式(函数组件)
1使用函数创建组件 函数组件:使用js的函数或者箭头函数创建的组件 约定1:函数组件名称必须以 开头 约定2:函数组件必须有返回值 表示该组件的结构 如果返回值为null 表示不渲染任何内容 2.1使 ...
- 好客租房22-react组件的两种创建方式(类组件)
2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必 ...
- 【转载】 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接口实现 ...
- python 多进程的两种创建方式
Python中使用线程有两种方式:函数或者用类来包装线程对象. 第一种---------函数 菜鸟教程的我没看懂,说说我自己懂的----看视频理解的 import time import thread ...
- java多线程总结:线程的两种创建方式及优劣比较
1.通过实现Runnable接口线程创建 (1).定义一个类实现Runnable接口,重写接口中的run()方法.在run()方法中加入具体的任务代码或处理逻辑. (2).创建Runnable接口实现 ...
随机推荐
- 汽车中的V流程开发
各步骤的简介各步骤的简介 (1)Control Design and offline Simulation:算法模型构建和离线仿真(基于模型的设计).算法工程师用Matlab模型实现算法:并实施离线仿 ...
- 要多简单就有多简单的H5拍照加水印
来一个简单粗暴的gif演示图 先来html 内容 <video id="video" width="320" height="240" ...
- ubantu14.04搜狗拼音安装
1. 先卸载fcitx: sudo apt-get purge fcitx*2. 安装fcitx和libssh2-1: sudo apt-get install fcitx 和 sudo apt-ge ...
- java中设置准确的时间日期类的用法
5.日期Date相关类: 题目1: 设置准确的时间(jdk1.1以后Date的setHours不被推荐了,所以要用Calendar设置时间) import java.util.*;public cla ...
- java中自动插入一个默认的构造函数,这到底怎么回事?
1.2 当没有任何构造函数,java编译器,会插入一个默认的构造函数 见下面的例子: class Line { double x = 0.02; double y; } publ ...
- layui文件上传组件“请求上传接口出现异常”问题解决方案
这是一个悲伤的故事,以前开发项目用过很多次这个组件,这次使用了Token,于是报了一些莫名其妙的错误,来复盘一下,警示自己! 刚开始接触layui的同学们肯定经常会看到这个错误 下面我们对这个异常的处 ...
- CRLF 漏洞学习和工具使用
原理 CRLF 指的是回车符(CR,ASCII 13,\r,%0d) 和换行符(LF,ASCII 10,\n,%0a),操作系统就是根据这个标识来进行换行的.但是如果对输入过滤不严,就会将恶意语句注入 ...
- Struts2-向值栈中存放数据
1.第一种 获取值栈对象,调用值栈对象里面的set方法(该方法添加的是一个Map集合) //第一种方式,使用值栈对象获取对象里面的set方法 //1.获取值栈对象 ActionContext cont ...
- Hyperledger Fabric的test-network启动过程Bash源码详解
前言 在基于Debian搭建Hyperledger Fabric 2.4开发环境及运行简单案例中,我们已经完成了Fabric 2.4的环境搭建及fabric-samples/test-network官 ...
- linux mysql导入导出sql文件
导出 导出单独数据库:mysqldump -uroot -p 数据库名 > 数据库名.sql 例:mysqldump -uroot -p database1 > database1.sql ...