ReactJS - 无法导入组件答案

【问题标题】：ReactJS - Can't import componentReactJS - 无法导入组件
【发布时间】：2016-02-05 01:24:21
【问题描述】：

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

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

【问题讨论】：

标签： javascript import routes reactjs react-router

【解决方案1】：

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

将您的组件设为默认导出：

TestComponent.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 模块（例如，Exploring ES6）。

【讨论】：

第二个是我要找的，也谢谢你的链接！
@LucaMormile 虽然它有效，但我通常建议使用默认导出。每个文件应该有一个组件，这与默认导出效果很好。但第二个当然也可以。
你是对的人，我已经阅读了 React 文档，他们解释了相同的建议。我会按照这个方法，再次感谢！
你为什么使用export default？我可以在一个文件中编写两个类，然后在另一个文件中调用它们吗？

【解决方案2】：

确保在导入语句后也包含分号。在某些情况下，您可能会通过浏览器（或 Node 等环境）读取代码而侥幸，但导入功能会直接运行到此代码中的导出中。

【讨论】：