明らかなようですが、ES6 で単一のモジュールをインポートするときに中括弧を使用するタイミングについて、少し混乱しました。たとえば、私が取り組んでいる React-Native プロジェクトには、次のファイルとその内容があります。
ファイルinitialState.js
var initialState = {
todo: {
todos: [
{id: 1, task: 'Finish Coding', completed: false},
{id: 2, task: 'Do Laundry', completed: false},
{id: 2, task: 'Shopping Groceries', completed: false},
]
}
};
export default initialState;
TodoReducer.js では、中括弧なしでインポートする必要があります。
import initialState from './todoInitialState';
中括弧で囲むとinitialState、次のコード行で次のエラーが発生します。
未定義のプロパティ todo を読み取ることができません
ファイルTodoReducer.js :
export default function todos(state = initialState.todo, action) {
// ...
}
中括弧を使用したコンポーネントでも同様のエラーが発生します。単一のインポートに中括弧を使用する必要があるかどうか疑問に思っていました。明らかに、複数のコンポーネント/モジュールをインポートする場合は、それらを中括弧で囲む必要があることはわかっています。
Stack Overflowの投稿ここ私の質問への回答にはなりませんが、単一のモジュールをインポートする際に中括弧を使用する必要があるか、または使用すべきでないか、あるいは ES6 で単一のモジュールをインポートする際に中括弧を決して使用すべきではないか (中括弧付きの単一のインポートが必要な場合もあるため、これは明らかに当てはまらない) を尋ねています。
ベストアンサー1
これはデフォルトのインポートです:
// B.js
import A from './A'
デフォルトのエクスポートAがある場合にのみ機能します:
// A.js
export default 42
この場合、インポート時にどのような名前を割り当てるかは重要ではありません。
// B.js
import A from './A'
import MyA from './A'
import Something from './A'
常に のデフォルトのエクスポートに解決されるためですA。
これはと呼ばれる名前付きインポートAです:
import { A } from './A'
と呼ばれる名前付きエクスポートAが含まれている場合にのみ機能します:A
export const A = 42
この場合、エクスポート名で特定のものをインポートするため、名前が重要になります。
// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!
これらを機能させるには、対応する名前付きエクスポートを次のように追加しますA。
// A.js
export const A = 42
export const myA = 43
export const Something = 44
モジュールにはデフォルトのエクスポートを 1 つしか設定できませんが、名前付きエクスポートは必要な数だけ設定できます(0、1、2、またはそれ以上)。これらをすべてまとめてインポートできます。
// B.js
import A, { myA, Something } from './A'
ここでは、デフォルトのエクスポートを としてインポートし、それぞれおよび というA名前付きエクスポートをインポートします。myASomething
// A.js
export default 42
export const myA = 43
export const Something = 44
インポート時に、すべて異なる名前を割り当てることもできます。
// B.js
import X, { myA as myX, Something as XSomething } from './A'
デフォルトのエクスポートは、通常モジュールから取得することが期待されるものに使用される傾向があります。名前付きエクスポートは、便利かもしれないが常に必要というわけではないユーティリティに使用される傾向があります。ただし、エクスポート方法を選択するのはあなた次第です。たとえば、モジュールにはデフォルトのエクスポートがまったくない場合があります。