在寫React Native代碼時,遇到了一個問題.
在一個組件中用import {React, Component} from 'react';導(dǎo)入React依賴時,老是提示undefined is not a function(evaluating '_react.React.createElement').
由于調(diào)試起來特別不方便,我們又不能從錯誤棧中得到什么有用的信息,所以搞得我有點懵.搗鼓了好長時間沒解決.
后來,發(fā)現(xiàn)React Native中自帶的index.android.js中,導(dǎo)入React依賴用的是下面這條語句:import React, {Component} from 'react';
就想碰碰運氣,修改了一下,結(jié)果竟然真成了!!!!
你們能想象當(dāng)時我心中一萬個草泥馬奔騰而過的場景嗎?!
于是,就查了查這兩者到底有什么區(qū)別.
下面是從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'
它們對應(yīng)的都是解析成導(dǎo)入A.js中的export default對應(yīng)的對象.
named import
named import是下面這種形式:
import {A} from './A'
只有當(dāng)A.js中包含了一條export A的語句時,它才會生效.比如:
export const A = 42
在named import,括號中的名字很關(guān)鍵!
如果A.js中只有export const A = 42這條語句,那下面的語句都將不會生效:
**
import {MyA} from './A';
import {Something} from './A';
**
為了讓上面的那兩條語句生效,你需要在A.js中添加如下內(nèi)容:
**
export const MyA = 42;
export const Something = 42;
**
結(jié)合
一個js文件中,只能有一個default export語句,但是可以有多個named export .例如,如果你的A.js內(nèi)容如下:
export default 42
export const myA = 43
export const Something = 44
那你可以通過下面的語句將它們導(dǎo)入進來:
import A, {myA, Something} from './A';
