ES6(react)中import导入时,有的带花括号{},有的不带问题解决办法
es6(react)中import导入时,有的带花括号{},有的不带
例如:有两个文件,home.js、user.js
当需要在home.js中引入user.js的时候
//home.js
import user from './user';
对于上面的这种引入方法,只有user.js文件中需要提供默认的export defulat进行导出(必须是默认导出)这样在home.js文件中就可以使用user了。如下
//user.js
export default 'nihao'
在这种不使用{}来引用模块的情况下,import模块时的命名是随意的,即如下三种引用命名都是正确的:
// home.js
import user from './user'
import user2 from './user'
import anyuser from './user'
因为它总是会解析到user.js中默认的export default。
而下面是使用了花括号命名的方法{user}来导入user.js:
import { user } from './user'
上面代码生效的前提是,只有在模块user.js中有如下命名导出为user的export 的代码,也就是:
//user.js
export const user = 42
而且,在明确声明了命名导出后,那么在另一个js中使用{}引用模块时,import时的模块命名是有意义的,如下:
// home.js
import { user } from './user' // 正确,因为user.js中有命名为user的export
import { user2 } from './user' // 错误!因为user.js中没有命名为user2的export
import { anyuser } from './user' // 错误!因为user.js中没有命名为anyuser的export
要想上述代码正确执行,你需要明确声明每一个命名导出:
一个模块中只能有一个默认导出export default,但是却可以有任意命名导出(0个、1个、多个),你也可以如下,一次性将他们导入:
// user.js
import user, { user2, anyuser } from './user'
这里我们使用导入默认导出user,以及命名导出user2和anyuser。
上一篇: 催奶的水果有哪些呢