web-dev-qa-db-ja.com

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

私はReactJSを初めて使用します。私は小さな単一ページアプリを開発しており、メインコンポーネント内にインポートするコンポーネントを作成しようとしています。

TestComponent.jsx

import React from 'react'

export class TestComponent extends React.Component {

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

私の内部main.jsx私はこのコンポーネント呼び出しをインポートしました

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')
)

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

javascriptimportroutesreactjsreact-router
9
Luca Mormile

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

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

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'

ReactコードでES6を使用する場合は、ES6モジュール（たとえば Exploring ES6 ）を参照することをお勧めします。

12
Mad Scientist

Importステートメントの後にもセミコロンを含めるようにしてください。場合によっては、ブラウザ（またはNodeなどの環境）でコードを読み取ってもかまわないかもしれませんが、インポート関数はこのコードでエクスポートに直接実行されます。

0
sao