我是 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')
)
我没有从控制台收到任何错误,但我没有看到我的组件。我做错了什么?
最佳答案
不带花括号的导入语法用于导入默认导出,而不用于导入命名导出。
将您的组件设为默认导出:
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)。
关于javascript - ReactJS - 无法导入组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33523736/