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

Question

我正在用< code>babel和< code>webpack玩< code>React和< code>ES6。我想在不同的文件中构建几个组件，导入到一个文件中，然后用< code>webpack将它们捆绑起来

假设我有几个这样的组件：

我的昵称.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>
      );
    }
}

主页.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并遵循他们的教程，我有了< code>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

要在ES6中导出单个组件，您可以使用< code>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'

Answer 2

如果没有默认导出，则用大括号包装组件：

import {MyNavbar} from './comp/my-navbar.jsx';

或从单个模块文件导入多个组件

import {MyNavbar1, MyNavbar2} from './module';

Answer 3

尝试默认组件中的导出：

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的特定成员，方法是：从“”导入｛MyNavbar｝/comp/my导航条.jsx'；在这种情况下，不需要默认值