ReactJS - 无法导入组件

Question

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

我从控制台没有任何错误,但我没有看到我的组件.我究竟做错了什么？

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'

如果要在React代码中使用ES6,可能需要阅读ES6模块(例如在Exploring ES6中).