ES6のインポート/エクスポートが機能しないのはなぜですか？

Question

私はcreate-react-app

実施例では、私のクラスをインポートしようとしている：

export default class HeaderView extends Component { 
    render() { 
     return (
      <div className="header-view"> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

import HeaderView from './HeaderView'

しかし、私はその後

export class HeaderView extends Component { }

を行います

import { HeaderView } from './HeaderView'はundefined

私はさまざまな方法で試しましたが、どれも動作していません。私が得た最も近い

export default { HeaderView }だったが、その後

import HeaderView from './HeaderView'はObject { HeaderView:.. }と import {HeaderView} from './HeaderView'で拡張するundefined

Answer 1

あなたの忘却はまた、あなたが各コンポーネント反応輸入する必要がある、あなたのコンポーネントで反応さ：

import React from "react"; 
export default class HeaderView extends React.Component { 
    render() { 
    return (
     <div className="header-view"> 
      {this.props.children} 
     </div> 
    ); 
    } 
} 

次に

import HeaderView from './HeaderView.js' 

が有効です。 はまた、私は、私はあなただけのは、お使いの環境にインストールされ、ライブラリや外部ファイルとして追加されているファイル拡張子のないコンポーネントをインポートすると考えているファイルの拡張子.jsまたは.jsx

を追加しました注意してください。

import { HeaderView } from './HeaderView.js' 

これは、複数のコンポーネントが同じファイル内のオブジェクトとして存在する場合に使用されます。

インポートを説明するために、この答えをチェックアウト： How to import part of object in ES6 modules

EDIT：あなたはWebPACKのデフォルトではこれらの拡張子を探すように設定しておく必要があり拡張子なしで輸入を解決するためには。

Answer 2

上記のDirtyRedzには、 を含めるようにしてください。 輸入ReactDOM、また

「-DOMを反応させ、」あなたのクラスコンポーネント にデフォルトを追加する例：輸出デフォルトクラスHeaderviewがReact.Component {..} を拡張し、別のファイル内のコンポーネントをインポートするときに、 {}内にコンポーネントを含める必要はありません。幸運