ES6のインポート文

Question

で中括弧の使用である私は二番目のブラケットを持って

import React from 'react' 
import { render } from 'react-dom' 

をインポートするには、2つの異なる方法があります見ることができます。だから両者の違いは何ですか？大括弧をいつ追加する必要がありますか？おかげで

Answer 1

あなたがあなたのコンポーネントをインポートする必要があるかどうかの違いは、あなたがexportあなたにそれがある方法の中にあるwithin brackets or without itです。

輸出の2種類

1. デフォルトのエクスポート
2. 名エクスポート

は、コンポーネントがコンポーネントがデフォルトのエクスポートであるならば、あなたがする必要があるone default export and zero or more named輸出

を持つことができますがあります角かっこなしでインポートしてください 例

export default App; 

import App from './path/to/App'; 

として輸入してという名前のエクスポートは、あなたが

としてそれをインポートすることができ

export const A = 25; 

または

export {MyComponent}; 

ザ・ようなものでした

import {A} from './path/to/A'; 

または

import {A as SomeName} from './path/to/A'; 

コンポーネントが1つのデフォルトのエクスポートといくつかの名前のエクスポートを持っている場合reactとreact-domの場合は同様に

import App, {A as SomeName} from './path/to/file'; 

をインポートするとき、あなたも一緒にそれらを混在させることができ、ReactとReactDOMはそれぞれdefault exportsであり、例えばComponentはnamed exportであり、reactおよびrenderは、react-domの名前付きエクスポートです。あなたは

import ReactDOM from 'react-dom'; 

を行い、その後、

ReactDOM.render() 

か、あなたの質問で述べたようにそれを使用するを使用することができますいずれかの理由のthats。

Answer 2

デフォルトとしてエクスポートする場合は、括弧を追加する必要はありません。モジュール内でデフォルトのみを持つことができます。

CASE1：

エクスポートデフォルト機能（NUM1、NUM2）{ 戻りNUM1 + NUM2。 }

ケース2：

関数の和（NUM1、NUM2）{ 戻りNUM1 + NUM2。 }

export {sum as default};

CASE3：

関数の和（NUM1、NUM2）{ 戻りNUM1 + NUM2。 }

エクスポートデフォルトの合計。

あなたは "./test.js" からデフォルト

輸入和をインポートすることができます。

console.log（sum（1、2））;

Answer 3

は

export default (a, b) => a + b; 
export const sub = (a, b) => a - b; 
export const sqr = a => a**2; 

それは次のようにインポートすることができ、この場合、

import sum, { sub, sqr } from './primitives'; 

は、sumは、 "デフォルトのエクスポート" と呼ばれ、モジュールは「単一を含むことができ、​​考えてみましょうデフォルトのエクスポート "のみです。

subおよびsqrは「名前付きエクスポート」と呼ばれ、モジュールには複数の名前付きエクスポートが含まれることがあります。