如何使用React + ES6 + webpack导入和导出组件？
如何使用React + ES6 + webpack导入和导出组件？
提问于 2015-11-27 19:16:58
我正在使用babel和webpack来处理React和ES6。我想在不同的文件中构建几个组件，导入到一个文件中，并将它们与webpack捆绑在一起
假设我有几个这样的组件：
my-navbar.jsx
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}main-page.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import MyNavbar from './comp/my-navbar.jsx';
export class MyPage extends React.Component{
render(){
return(
<MyNavbar />
...
);
}
}
ReactDOM.render(
<MyPage />,
document.getElementById('container')
);根据他们的教程，我使用了main.js
import MyPage from './main-page.jsx';在构建项目并运行它之后，我在浏览器控制台中得到以下错误：
Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.我做错了什么？如何正确地导入和导出我的组件？
回答 2
Stack Overflow用户
发布于 2015-11-27 23:42:04
如果没有默认导出，则使用大括号包装组件：
import {MyNavbar} from './comp/my-navbar.jsx';或从单个模块文件导入多个组件
import {MyNavbar1, MyNavbar2} from './module';Stack Overflow用户
发布于 2016-06-16 23:21:12
要在ES6中导出单个组件，可以使用export default，如下所示：
class MyClass extends Component {
...
}
export default MyClass;现在使用以下语法导入该模块：
import MyClass from './MyClass.react'如果您希望从单个文件中导出多个组件，则声明应如下所示：
export class MyClass1 extends Component {
...
}
export class MyClass2 extends Component {
...
}现在，您可以使用以下语法导入这些文件：
import {MyClass1, MyClass2} from './MyClass.react'页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33956201
复制相关文章
相似问题