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

我使用babel和webpack玩React和ES6 。 我想要在不同的文件中创build多个组件，导入到一个文件中，并将其与webpack捆绑在一起

比方说，我有几个这样的组件：

我-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> ); } } 

主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'; 

构build项目并运行后，我的浏览器控制台中出现以下错误：

 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> ); } } 

Answer 2

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

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

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

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

Answer 3

要导出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' 

Answer 4

对于所有导入和导出模块的新方法，MDN都有非常好的文档是ES 6 Import-MDN 。 关于你的问题的简要描述你可能要么：

1. 声明你正在导出的组件是作为这个模块导出的“默认”组件： export default class MyNavbar extends React.Component { ，所以当导入你的'MyNavbar'时，你不必在它周围放置大括号： import MyNavbar from './comp/my-navbar.jsx'; 。 不要将大括号括起来，而是告诉文档这个组件被声明为“导出默认”。 如果不是，你会得到一个错误（如你所做的）。

2. 如果你不想在导出时声明你的'MyNavbar'为默认导出： export class MyNavbar extends React.Component { ，那么你将不得不将'MyNavbar导入到大括号中： import {MyNavbar} from './comp/my-navbar.jsx';

我认为，因为你只在'./comp/my-navbar.jsx'文件中有一个组件，使它成为默认的导出是很酷的。 如果你有更多的组件像MyNavbar1，MyNavbar2，MyNavbar3那么我不会让它们或者它们成为默认的，并且当模块没有声明任何一个默认的可以使用的模块时， import {foo, bar} from "my-module"; foo和bar是你模块的多个成员。

绝对读取MDN文档，它有很好的语法示例。 希望这有助于解决任何人想要玩ES6和组件导入/导出在React的一点点。