React组件导入的两种方式(动态导入组件的实现)
一、 react组件两种导入方式
React组件可以通过两种方式导入另一个组件
- import(常用)
import component from './component'
- require
const component = require('./component')
两种方式有什么区别?
提出的规范不同
import是ES6语法,reuqire是CommonJs提出的.import会通过babel转换成CommonJS规范。
下面两行代码是等价的
import component from './component'
// =>
const component = require('./component')
推荐统一规范一种导入方式,防止混乱
当然,不同情况使用的方式也是不一样的.
下面详细介绍两种导入方式对应的情况(注意这里不介绍按需加载,可看《前端性能优化之按需加载》)
二、两种方式对应的 情况
- import xxx from 'xxx'
一般来说使用import就够了.但是要注意import需要放在定义组件的外部。这就导致一个问题:
如果我需要通过动态路径动态加载组件(这里并非指按需加载),在class里面(ES6)语法使用import会报下面错误:
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level
这时候使用require方法能很好解决
- var xxx = require('xxx')
这里需要注意的是:
用import
引入的组件只需要export default即可
而通过require
引入的组件需要底部生命module.exports = component
用例子解释一下:
需求场景: 现在有大量的子组件存放在对应文件夹(如下)
firstComponent
/index
secordComponent
/index
thirdComponent
/index
...
但是我在父组件每次只需加载其中一个即可,我不想一次性导入大量的子组件,然后加判断筛选出对应组件。这样代码可能会非常多、杂(比如我有20个子组件,那么我要写20个import);
于是我通过require动态载入
//父组件
renderDetail(mode,pageType){
let dynamicDetail = require(`../components/content/${pageType}/index`)
return dynamicDetail
}
render(){
//const { pageType } = this.props; 这里的pageType是判断加载哪个子组件的条件
//我们先假设一个
pageType = firstComponent; //存在firstComponent这么一个文件夹里面有一个index.js组件
let DynamicDetail = this.renderDetail(pageType); //动态拿到这个组件
return(
<div className="detailWried">
<DynamicDetail />
</div>
)
}
//子组件
import React from 'react'
export default class firstComponent extends React.Component{
render(){
return(
<div>
NavMenu
</div>
)
}
}
module.exports = firstComponent;
这样我就可以实现动态加载组件的功能了.把pageType替换成动态的即可,pageType的值则按照用户操作动态改变即可。例如用户选择第二个组件的时候:pageTpey = secordComponent
注意这里可能会遇到一个问题:
把require里面的路径替换成变量的话,
let path = `../../../../components/content/${mode}/children/${pageType}/index`
let dynamicDetail = require(path)
会报以下错
//终端
Critical dependency: the request of a dependency is an expression
//浏览器
can't require module'.'
在require使用字符串变量即可(字符串变量可真的是一个好方便东西)
至此!两个导入组件的方式介绍完毕!
扩展一下:
React组件导入的两种方式(动态导入组件的实现)的更多相关文章
- .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格
一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...
- python模块的导入的两种方式区别详解
Python 有两种导入模块的方法.两种都有用,你应该知道什么时候使用哪一种方法.一种方法,import module,另一种是from module import,下面是 from module i ...
- DRF 序列化组件 序列化的两种方式 反序列化 反序列化的校验
序列化组件 django自带的有序列化组件不过不可控不建议使用(了解) from django.core import serializers class Books(APIView): def ge ...
- vue实现组件切换的两种方式
<!DOCTYPE html> <html> <head> <title>组件的切换</title> <meta charset=&q ...
- Java EXCEL导入的两种方式JXL和POI
Excel导入有两个方法:JXL 和POI 1.JXL解析Excel public class JxlReadExcel { /** * JXL解析Excel * @author Da ...
- vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)
简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...
- 设置Linux之CentOS7的网络的两种方式动态IP+静态IP
1 动态IP 参考之前的文章 点击进入 2 静态IP vi /etc/sysconfig/network-scripts/ifcfg-ens33 详情配置如下,上面半部分是我之前的动态IP的设置 静态 ...
- 【React】遍历的两种方式
1.foreach(推荐) list.forEach((item)=>{ }); eg: dataSource.forEach((item) => { const est = item.e ...
- 使用react定义组件的两种方式
react组件的两种方式:函数定义,类定义 在定义一个组件之前,首先要明白一点:react元素(jsx)是react组件的最基本的组成单位 组件要求: 1,为了和react元素进行区分,组件名字首必须 ...
随机推荐
- Lucene 个人领悟 (三)
其实接下来就是贴一下代码,熟悉一下Lucene的正常工作流程,或者说怎么使用这个API,更深层次的东西这篇文章不会讲到. 上一篇文章也说了maven的配置,只要你电脑联网就可以下载下来.我贴一下代码. ...
- DOM jquery
DOM 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM ...
- .NET 常用ORM之SubSonic
一.SubSonic简单介绍 SubSonic是一个类似Rails的开源.NET项目.你可以把它看作是一把瑞士军刀,它可以用来构建Website和通过ORM方式来访问数据.Rob Conery和Eri ...
- PXC备份方式总结
记录一下. 1.mysqldump数据导出 关于GTID: GTID是MySQL5.6以后,加入了全局事务 ID (GTID) 来强化数据库的主备一致性,故障恢复,以及容错能力. A global t ...
- Java利用JNI调用C/C++写成的DLL
前言 由于学期作业的要求,笔者需要开发一个语音识别系统.出于对Java的热爱,笔者非常想用Java来写上层程序(前台+数据库的三层),又要用到Microsoft Speech SDK,所以在这些条件下 ...
- 零基础Python爬虫实现(爬取最新电影排行)
提示:本学习来自Ehco前辈的文章, 经过实现得出的笔记. 目标网站 http://dianying.2345.com/top/ 网站结构 要爬的部分,在ul标签下(包括li标签), 大致来说迭代li ...
- bzoj 2753 [SCOI 2012] 滑雪与时间胶囊 - Prim
题目传送门 传送点I 传送点II 题目大意 给定一个有$n$个点$m$条边的图,每个点有一个高度$h_{i}$,能从$u$经过一条边到达$v$,当且仅当存在一条边是$(u, v)$或$(v, u)$, ...
- bash 配置文件
两类: profile类:为交互式登录的shell进程提供配置 bashrc类:为非交互式登录的shell进程提供配置 登录类型: 交互式登录shell进程: 直接通过某终端输入账号和密码后登录打开的 ...
- route 工具
route工具 route工具主要用来查看或修改内核路由表 查看内核路由表 route [-nee] 参数说明: -n:不要使用协议或主机名称,直接使用 IP 或 port number:-ee:使用 ...
- .NET Standard vs. .NET Core
What is the difference between .NET Core and .NET Standard Class Library project types? Answer1 When ...