Reactjs 如何使用React+；ES6&x2B；网页包？

我正在玩

React

和

ES6

，使用

babel

和

webpack

。我想在不同的文件中构建几个组件，导入到单个文件中，并将它们与

webpack

假设我有几个类似的组件：

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

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

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

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

从“React”导入React；
从“react bootstrap/lib/Navbar”导入导航栏；
导出默认类MyNavbar扩展React.Component{
render（）{
返回(
...
);
}
}

---

默认情况下，您表示该模块中的成员，如果未提供特定的成员名称，则将导入该模块。您还可以这样表示您想要导入名为MyNavbar的特定成员：import{MyNavbar}from'/comp/my navbar.jsx'；在这种情况下，如果没有默认导出，则不需要使用默认值

用大括号包装组件：

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

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

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

---

MDN提供了非常好的文档，介绍了ES 6中所有导入和导出模块的新方法。关于您的问题，您可以：

将要导出的组件声明为此模块要导出的“默认”组件：

导出默认类MyNavbar扩展了React.Component{

，因此在导入“MyNavbar”时，不必在其周围加上花括号：

从“/comp/my navbar.jsx”导入MyNavbar；

。 但如果在导入周围不加大括号，则会告诉文档此组件已声明为“导出默认值”。如果不是，则会出现错误（就像您所做的那样）

如果在导出“MyNavbar”时不想将其声明为默认导出：

导出类MyNavbar扩展React.Component{

，则必须将“MyNavbar”的导入用花括号括起来：

从“/comp/my navbar.jsx”导入{MyNavbar}；

我认为，由于您的“/comp/my navbar.jsx”文件中只有一个组件，因此将其作为默认导出很酷。如果您有更多的组件，如MyNavbar1、MyNavbar2、MyNavbar3，那么我不会将其作为默认组件，也不会将其作为默认组件，并在模块未声明任何一项默认内容时导入模块的选定组件se:

从“我的模块”导入{foo，bar}；

其中foo和bar是模块的多个成员

---

一定要阅读MDN文档，它有很好的语法示例。希望这有助于为那些想在React中玩弄ES 6和组件导入/导出的人提供更多的解释。

要在ES6中导出单个组件，可以使用

导出默认值

，如下所示：

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'

---

我希望这是有益的

步骤1:App.js是（主模块）导入登录模块

import React, { Component } from 'react';
import './App.css';
import Login from './login/login';

class App extends Component {
  render() {
    return (
      <Login />
    );
  }
}

export default App;

---

在react中导入组件有两种不同的方式，建议使用组件方式

图书馆通道（不推荐）

组件方式（推荐）

PFB详细说明

库导入方式

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

这非常好用，但它不仅捆绑Button和FlatButton（及其依赖项），而且捆绑整个库

组件导入方式

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

缓解这种情况的一种方法是尝试只导入或需要所需的内容，比如组件方式。使用相同的示例：

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

这只会捆绑Button、FlatButton和它们各自的依赖项。但不会捆绑整个库。因此，我会尝试摆脱所有库导入，改用组件方式

---

如果您没有使用大量的组件，那么它应该会大大减少捆绑文件的大小。

这对我不起作用。在我自己的项目中运行它时，我收到一个错误，说它无法导入组件。您知道为什么吗？使用默认值，您表示它将成为该模块中的成员，如果没有特定的memb，将导入该模块提供了er名称。您还可以通过这样做表示您希望导入名为MyNavbar的特定成员：从“/comp/my navbar.jsx”导入{MyNavbar}；在这种情况下，不需要默认值这应该是可接受的答案。这是es6中的

命名导出

，是比使用

默认值

更安全的导出方式“如果没有默认导出，则使用大括号包装组件”就足够了。TNX可能会有所帮助：在我的情况下，路径中缺少“/”。这听起来有点奇怪，因为组件处于相同的文件夹级别。

export

关键字详细信息。目前，任何web浏览器都不支持它。

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';