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

我使用babelwebpackReactES6 。 我想要在不同的文件中创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`. 

我究竟做错了什么? 我怎样才能正确导入和导出我的组件?

尝试在组件中默认输出:

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

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

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

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

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

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

对于所有导入和导出模块的新方法,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的一点点。