export和export default的区别

es6中export和export default的区别

  • export与export default均可用于导出常量、函数、文件、模块;
  • 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用;
  • 在一个文件或模块中,export、import可以有多个,export default仅有一个;
  • 通过export方式导出,在导入时要加{ },export default则不需要;
  • 其实很多时候export与export default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出,在导入时要加{ },export default则不需要。使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

React中使用export导出类可以有两种方法

1. export default classname

这种导出方式与export default class classname extends React.class相同

在其他文件中引用时采取如下方式

import classname form path

例如:

Com.js

class Welcome extends React.Component{render(){return <h1> hello,{this.props.name}</h1>}
}function App(){return (<div><Welcome name="Sara"/><Welcome nmae="Peng"/></div>);
}export  default App;

index.js

import App  from './components/Com';
const element=<App/>;
ReactDOM.render(element, document.getElementById('root'));

2. export {classname1,classname2}

在其他文件中引用时采用如下方式

import {classname1,classname2} from pathimport {classname1} //注意引用一个类时也要加上{}

例如:

class Welcome extends React.Component{render(){return <h1> hello,{this.props.name}</h1>}
}function App(){return (<div><Welcome name="Sara"/><Welcome nmae="Peng"/></div>);
}
export  {Welcome,App};

index.js

import {App}  from './components/Com';const element=<App/>;
ReactDOM.render(element, document.getElementById('root'));

 

作者:ZhaoYingChao88
原文:https://blog.csdn.net/ZYC8888...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/252227.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

koa中间件机制详解

转自&#xff1a;https://cnodejs.org/topic/58fd8ec7523b9d0956dad945 koa是由express原班人马打造的一个更小、更富有表现力、更健壮的web框架。 在我眼中&#xff0c;koa的确是比express轻量的多&#xff0c;koa给我的感觉更像是一个中间件框架&#xff0c;koa只是一个基础的…

极度推荐的文章和网站

推荐文章---收录中 因为是及时雨,这里就给他放在开头啦&#xff1a;http://www.cnblogs.com/zhuzhenwei918/p/7241971.html webpack3.0配置指南&#xff1a;http://www.cnblogs.com/caideyipi/articles/7080010.html 超酷的伪元素网站&#xff1a;https://tympanus.net/Develop…

倍道而行:选择排序

一、为什么学了之后过段时间又会忘记了&#xff1f; 因为没有去运用它和认为面试需要而没有真正的重视。现在给它赋予意义&#xff1a;1.那就是基础牢固&#xff0c;才可触类旁通2.真正记得和随时可以拿出手&#xff0c;那么面试可以PK掉一大批人。不然看到一个精妙的算法就学一…

如何构建一个真实的推荐系统?

AI 前线导读&#xff1a;随着互联网行业的井喷式发展&#xff0c;数据规模呈现爆炸式增长。大数据中蕴含了巨大的价值&#xff0c;但同时也来了很 “信息过载” 的问题。推荐系统作为一个广泛应用的信息过滤系统&#xff0c;在很多领域取得了巨大的成功。在电子商务上&#xff…

volatile的适用场景

介绍 把代码块声明为 synchronized&#xff0c;有两个重要后果&#xff0c;通常是指该代码具有 原子性&#xff08;atomicity&#xff09;和 可见性&#xff08;visibility&#xff09;。 原子性意味着个时刻&#xff0c;只有一个线程能够执行一段代码&#xff0c;这段代码通过…

link和@import的区别

1、link属于HTML标签&#xff0c;import是css提供的 2、link是HTML标签&#xff0c;没有兼容问题&#xff0c;而import只在IE5以上才能识别 3、页面被加载时&#xff0c;link会同时被加载&#xff0c;而import引用的css会等到页面加载完再加载 4、link方式的样式的权重高于impo…

6.java 代码块

代码块 在java中用{}括起来的称为代码块&#xff0c;代码块可分为以下四种: 普通代码块构造代码块静态代码块同步代码块普通代码块 在方法或语句中出现的{}就称为普通代码块。普通代码块和一般语句的执行顺序由他们在代码中出现的次序决定&#xff0c;先出现先执行。 普通代码块…

C#如何测试代码运行时间

第一种方式&#xff1a;System.Diagnostics.Stopwatch stopwatch new Stopwatch(); stopwatch.Start(); // 开始监视代码运行时间 // 需要测试的代码 .... stopwatch.Stop(); // 停止监视 TimeSpan timespan stopwatch.Elapsed; // 获取当前实例测量得出的总时间 double …

0074 几道面试题

昨天参加了惠装网的面试&#xff0c;有些题不会做的&#xff0c;记录下来 switch语句能否作用在byte、long、String上 Java1.7以前&#xff1a;byte、short、int、char Java1.7开始&#xff1a;新增String 因此switch语句不能作用在long上&#xff0c;看下面代码&#xff1a; p…

SpringBoot入门之内嵌Tomcat配置

spring boot默认web程序启用tomcat内嵌容器tomcat&#xff0c;监听8080端口,servletPath默认为 / 。需要用到的就是端口、上下文路径的修改&#xff0c;在spring boot中其修改方法极其简单&#xff0c;实例如下&#xff1a; server.port8088 server.context-path/test 启动程序…

第二十二章:动画(六)

复合动画您可以混合等待和未等待的调用来创建复合动画。 例如&#xff0c;假设您希望按钮在大小扩展的同时旋转360度然后收缩。ViewExtensions类定义一个方法名称ScaleTo&#xff0c;它为Scale属性设置动画&#xff0c;就像RotateTo为Rotate属性设置动画一样。 Button大小的扩展…

C#操作Excel总结

0. 导入命名空间&#xff1a; 1234using Microsoft.Office.Core;using Microsoft.Office.Interop.Excel;using System.IO;using System.Reflection;1. 如何打开已有excel文档&#xff0c;或者创建一个新的excel文档 123Application app new Application();Workbooks wbks app…

Ubuntu16.04用源安装Nginx+PHP5.6+MySQL5.6

安装Nginx 1、首先添加nginx_signing.key(必须&#xff0c;否则出错) $ wget http://nginx.org/keys/nginx_signing.key$ sudo apt-key add nginx_signing.key 2、添加]Nginx](http://nginx.org/)官方提供的源 $ echo "deb http://nginx.org/packages/ubuntu/ trusty ngin…

leetcode -39组合总数

搜就完事了&#xff0c;没想着优化。唉~太菜&#xff0c;给一个位置标记位置&#xff0c;然后通过该位置向该位置及该位置以下寻找&#xff0c;这样不存在什么重复回去查找问题。 如果总结大于目标值&#xff0c;回溯一下&#xff0c;如果不大于继续。 class Solution { public…

避免某个子窗体重复运行的方法(showdialog、show)

在C#中窗口的显示有两种方式&#xff1a;模态显示&#xff08;showdialog&#xff09;和非模态显示&#xff08;show&#xff09;。 二者最常见的区别是&#xff1a;模态显示后&#xff0c;弹出窗口阻止调用窗口的所有消息响应。只有在弹出窗口结束后调用窗口才能继续。在模态窗…

ubantu之Git使用

本文讲述在Ubuntu 14.04 x64环境下&#xff0c;如何安装Git&#xff0c;配置连接GitHub&#xff0c;并且上传本地代码到github。 一. 注册Git账户以及创建仓库 要想使用github第一步当然是注册github账号了。之后就可以创建仓库了&#xff08;免费用户只能建公共仓库&#xff0…

Java中基础数据类型分类

Java中的四类八种基本数据类型 第一类&#xff1a;整数类型 byte short int long &#xff08;int是整形&#xff0c;也属于整数类型&#xff09; 第二类&#xff1a;浮点型 float double 第三类&#xff1a;逻辑型 boolean(它只有两个值可取true false) 第四类&#xff1…

C#如何打包EXE程序生成setup安装文件

C#如何打包EXE程序生成setup安装文件作为研发人员&#xff0c;在本机上开发的winform wpf或者控制台程序需要发给其他人测试时候&#xff0c;一般需要对其进行打包生成setup安装文件&#xff0c;今天第一次&#xff0c;搜了下资料&#xff0c;记录如下&#xff1a;注&#xff1…

PHP正则表达式

php正则表达示的定界符 PHP的正则表达示定界符的规定如下&#xff1a; 定界符&#xff0c;不能用a-z A-Z 0-9 其他的都可以用。必须成对出现&#xff0c;有开始就有结束。 我们来例几个例子&#xff1a; /中间写正则/ 正确%中间写正则% 正确^中间写正则^ 正确中间写正则 正确(…

最具戏剧性的分析诊断案例——十分钟锁定数据库性能“元凶”

昨天&#xff0c;正好有点空时间想看看书&#xff0c;结果&#xff0c;刚打开书&#xff0c;没看几个字儿&#xff0c;接到用户电话说&#xff1a;一个库有问题&#xff0c;希望能帮忙看下。因为我知道他们那边也有自己的专职DBA&#xff0c;于是问&#xff1a;没让人给看看吗&…