爲什麼我需要在ES6中用數字括號包裝一些導入？

-2

我在ES6中發現了一個奇怪的情況。例如，我使用npm包react和react-router。我想將它們導入文件：爲什麼我需要在ES6中用數字括號包裝一些導入？

import React from "react"; 
import { browserHistory } from "react-router";

奇怪的情況是，我需要在數字括號包裹browserHistory，但我並不需要包裝反應。是什麼原因？

import { React } from "react"; // React is undefined 
import browserHistory from "react-router"; // browserHistory is undefined

什麼原因導致我需要自定義導入？

來源

2016-06-07 asiniy

[MDN - 導出]（https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export）[MDN - 導入]（https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import） – zerkms

瘋狂猜測：有一個默認導出，React使用它。因此，在browserHistory中，您正在導出該方法，並且您正在獲取具有不同名稱的默認值，或者獲取整個事件。 –

如果要導入的模塊具有默認導出，則不必使用{}語法來訪問給定的導出。命名（非默認）導出必須通過{}語法來訪問。模塊可以具有默認導出以及許多命名的導出。

一個例子是React，它是一個默認導出，但該模塊也有一個命名的Component導出。要導入這兩個導出，語法：import React, { Component } from 'react'將被使用。

來源

2016-06-07 06:27:15 httpNick

「如果您要導入的模塊具有默認導出，則不需要{}語法」---這是模糊的。 '從'react'導入React，{Component};'是一個常用語句。無論默認導出是否存在，您可能需要也可能不需要使用命名導入。 – zerkms

謝謝@zerkms我編輯我的答案，希望解決我原來的答案有問題。如果我的觀點不太好，請讓我知道或進一步編輯。 – httpNick

「訪問屬性」---它不是「屬性」，而是一個命名導出。 – zerkms

ES6模塊區分兩種出口：默認出口和其他出口。

每個模塊最多可以有一個默認導出。默認導出有點像模塊的「主要吸引力」。它應該是你可能意味着模塊具有的一件事。所有其他出口都適合其他類別。

因此，一個模塊可以有任何數量的導出（甚至爲零），其中最多一個可以是默認導出。

// this is a normal export 
export var foo = 'foo'; 

// this is a default export 
var bar = 'bar'; 
export default bar;

在語法import side，這得到了更復雜的：默認出口

在語法的export side，默認的出口僅通過增加一個default的export關鍵字後標記進口外大括號。所有其他出口都在花括號內輸入。

import bar, { foo } from 'some-module';

這將導入默認出口部件模塊爲bar，並導入（命名）等出口foo。請注意，默認導出沒有固定名稱：導出時成員的原始名稱無關緊要。相反，你在導入時給它一些名字。所以你也可以這樣寫：

import baz, { foo } from 'some-module';

這仍然會導入與模塊相同的默認導出，但會給它一個不同的名稱。不過，其他進口商需要有正確的名稱，因爲這是用來識別它們的。但是，您可以使用as關鍵字給他們一個不同的名稱。

使用export和import語句時還有幾件事要知道。你應該檢查MDN的完整描述。

來源

2016-06-07 06:42:31 poke

'default'是特殊的，因爲它是一個關鍵字，但在它的核心，它只是一個名字，就像任何其他名字一樣出口。不能導出兩個名稱相同的東西，不管名稱是「default」還是別的東西。另請注意'export default bar;'不是導出默認值的唯一方法。您還可以執行'export {bar作爲默認值};'，這還有額外的好處，您也可以實時綁定'bar'。 – loganfsmyth

爲什麼我需要在ES6中用數字括號包裝一些導入？

回答

相關問題