在写React Native代码时,遇到了一个问题.
在一个组件中用import {React, Component} from 'react';导入React依赖时,老是提示undefined is not a function(evaluating '_react.React.createElement').
由于调试起来特别不方便,我们又不能从错误栈中得到什么有用的信息,所以搞得我有点懵.捣鼓了好长时间没解决.
后来,发现React Native中自带的index.android.js中,导入React依赖用的是下面这条语句:import React, {Component} from 'react';
就想碰碰运气,修改了一下,结果竟然真成了!!!!
你们能想象当时我心中一万个草泥马奔腾而过的场景吗?!
于是,就查了查这两者到底有什么区别.
下面是从Stack Overflow上面得到的答案.
感觉default import和named import翻译成中文有点难翻译,索性就不翻译了.直接用英文昵称得了.
default import
下面这种形式就是default import:
import A from './A'
只有A.js中,包含了一条export default 语句时,它才能生效.比如,export default 42.
不管你是从A.js中import什么,比如:
import A from './A'
import MyA from './A'
import Something from './A'
它们对应的都是解析成导入A.js中的export default对应的对象.
named import
named import是下面这种形式:
import {A} from './A'
只有当A.js中包含了一条export A的语句时,它才会生效.比如:
export const A = 42
在named import,括号中的名字很关键!
如果A.js中只有export const A = 42这条语句,那下面的语句都将不会生效:
**
import {MyA} from './A';
import {Something} from './A';
**
为了让上面的那两条语句生效,你需要在A.js中添加如下内容:
**
export const MyA = 42;
export const Something = 42;
**
结合
一个js文件中,只能有一个default export语句,但是可以有多个named export .例如,如果你的A.js内容如下:
export default 42
export const myA = 43
export const Something = 44
那你可以通过下面的语句将它们导入进来:
import A, {myA, Something} from './A';
