ReactJS - 无法导入组件

Question

我是 ReactJS 的新手。我正在开发一个小的单页应用程序，我只是想创建我的组件以在我的主要组件中导入。

测试组件.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')
)

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

原文由 Luca Mormile 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不带花括号的导入语法用于导入默认导出，而不是用于导入命名导出。

使您的组件成为默认导出：

测试组件.jsx

 import React from 'react'

export default class TestComponent extends React.Component {

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

或者，您应该能够按原样使用以下导入语句导入它：

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

如果您想在 React 代码中使用 ES6，您可能需要阅读 ES6 模块（例如， 探索 ES6 ）。

原文由 Mad Scientist 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

.js 应该首字母大写。否则导入不会发生。

原文由 Rajarshi Mandal 发布，翻译遵循 CC BY-SA 4.0 许可协议