ReactJS - コンポーネントをインポートできません

Question

ReactJSの新機能です。私は小さな単一のページのアプリケーションを開発していると私は私の主なコンポーネント内にインポートするために私のコンポーネントを作成しようとしています。私main.jsxインサイド

TestComponent.jsx

import React from 'react' 

export class TestComponent extends React.Component { 

    render() { 
     return (
      <div className="content">Test Component</div> 
     ) 
    } 
} 

私は

import TestComponent from './components/TestComponent.jsx' 

を呼び出し、このコンポーネントは、その後、私は特定のルートのための私のコンポーネントを呼び出すようにしようとしたインポートしました：

render(
    (<Router history={history}> 
     <Route path="/" component={NavMenu}> 
      <IndexRoute component={Index}/> 
      <Route path="test" component={TestComponent}></Route> 
     </Route> 
    </Router>), 
    document.getElementById('main') 
) 

私はコンソールから何のエラーもありませんでしたが、コンポーネントが表示されません。私は間違って何をしていますか？

Answer 1

中括弧を使用しないインポート構文は、名前付きエクスポートをインポートするのではなく、デフォルトのエクスポートをインポートするためのものです。

コンポーネントデフォルトのエクスポートを行います。

TestComponent.jsx

import React from 'react' 

export default class TestComponent extends React.Component { 

    render() { 
     return (
      <div className="content">Test Component</div> 
     ) 
    } 
} 

それは次のimport文であるとして、別の方法としては、それをインポートすることができるはずです。

import { TestComponent } from './components/TestComponent.jsx' 

あなたのリアクションコードでES6を使いたい場合は、ES6モジュール（例えばExploring ES6）を読むことができます。