如何使用React + ES6 + webpack导入和导出组件？

Question

我在玩React和ES6使用babel和webpack。我想在不同的文件中构建多个组件，将其导入单个文件并将其捆绑在一起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')
);

使用webpack并按照其教程进行操作，我有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`.

我究竟做错了什么？如何正确导入和导出组件？

Answer 1

尝试 默认设置 组件中的导出：

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export default class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

通过使用默认值，您表示将成为该模块的成员，如果未提供特定的成员名称，则将导入该模块。您也可以这样做表示自己要导入名为MyNavbar的特定成员：从’./comp/my-
navbar.jsx’导入{MyNavbar}；在这种情况下，不需要默认值