2017-01-20 54 views
22

React with ES6を使用しています。 ReactとComponentをインポートしますインポートの違いReactとimport {Component}構文

import React from 'react' 
import { Component } from 'react' 

なぜ構文が異なるのですか?下記のように使用することはできませんか?ここで

import Component from 'react' 
+0

また、[ES6のインポートに中括弧を使用する必要がありますか?](http://stackoverflow.com/q/36795819/218196) –

+1

Reactライブラリからインポートする場合は、Reactをこのようにインポートする必要があります ' import react 'react'from'から Reactはデフォルトのエクスポートであるためです。一方、Componentは中括弧で囲まれています。これはオプションです。 ライブラリからのオプションのインポートは、中括弧で囲まれています –

答えて

37

importためdocsです。

import React from 'react' 

上記はデフォルトのインポートです。デフォルトのインポートはexport default ...でエクスポートされます。単一のデフォルトエクスポートのみが可能です。

これはメンバーのインポート(名前付きインポート)です。メンバーの輸入品はexport ...で輸出されます。多くのメンバーの輸出が可能です。

あなたはこの構文を使用して、両方をインポートすることができます:デフォルトのJavaScriptで

import React, { Component } from 'react'; 

をし、名前の輸入が分割されているので、それがデフォルトだったようにあなたが名前のインポートをインポートすることはできません。

import Component from 'react'; 
+0

「import component from 'react';」では、「react」のデフォルトエクスポートである「Component」を呼び出すだけではありませんか?言い換えると、ComponentはReactオブジェクトであり、デフォルトで 'react'モジュールからエクスポートされ、nullではありません。つまり、デフォルトのエクスポートは名前付きのエクスポートではないので、名前は重要ではありません。 – Josmar

+1

@Josmarはい、どのように私は非常によく表現していないかを参照してください。編集を行った。 :) –

+0

ハッキングバベルプリセットを使用しない限りコードが動作しないように、Reactにデフォルトのエクスポートがないことを忘れてしまった... –

0

コンポーネントが名前の輸出である例えばので、それは{}で非構造する必要があります。以下、React.Componentと同じであることを行っていない'react'パッケージ(のデフォルトのエクスポートに名前Componentを設定します。

からリアクトのためのデフォルトのエクスポートで反応させ、「反応」が正しいです。例えば、輸出のデフォルト任意のファイルにあなたは「輸出のデフォルトが反応」のようなステートメントを使用して、デフォルトで何かをエクスポートしている場合、それはすることができ、

+1

明確にするために、インポートを破壊することはありません。構文的には似ていますが、いくつかの興味深い違いがあります。 Kent C Dodds [興味深い記事を書きました](https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-aolution-ad2d5ab93ce0) –

0

に反応輸入された反応のように輸入された。

デフォルト以外のエクスポートについては、 "import {Components}"のようにカッコで囲んで実際にインポートするものを指定する必要があります。

関連する問題