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

Question

我正在使用 babel 和 webpack 来玩弄 React 和 ES6。我想在不同的文件中构建多个组件，导入单个文件并将它们与 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';

构建项目并运行之后，我在浏览器控制台中收到以下错误：

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 的特定成员：import {MyNavbar} from './comp/my-navbar.jsx';在这种情况下，不需要默认值

Answer 2

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

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

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

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

Answer 3

MDN 有关于导入和导出模块的所有新方法的非常好的文档是 ES 6 Import-MDN。关于您的问题的简要说明，您可以：

将您正在导出的组件声明为此模块正在导出的 'default' 组件： export default class MyNavbar extends React.Component { ，因此在导入 'MyNavbar' 时，您不必在其两边加上大括号：import MyNavbar from './comp/my-navbar.jsx';。不在导入周围放置大括号是在告诉文档该组件被声明为 'export default'。如果不是，你会得到一个错误（就像你做的那样）。
如果您不想在导出时将 '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 文档，它有很好的语法示例。希望这有助于为任何希望在 React 中玩弄 ES 6 和组件 import/exports 的人提供更多解释。

Answer 4

在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 5

希望对您有所帮助

第 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;

第 2 步：创建登录文件夹并创建 login.js 文件并自定义您的需求，它会自动呈现为 App.js 示例 Login.js

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

class Login extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default Login;

Answer 6

react有两种不同的组件导入方式，推荐组件方式

库方式（不推荐）
分量方式（推荐）

PFB详细解释

库导入方式

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

这很好用，但它不仅捆绑了 Button 和 FlatButton（及其依赖项），还捆绑了整个库。

组件导入方式

减轻它的一种方法是尝试只导入或要求需要的东西，比方说组件方式。使用相同的例子：

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

这只会捆绑 Button、FlatButton 及其各自的依赖项。但不是整个图书馆。所以我会尝试摆脱所有库导入并改用组件方式。

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

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

How to import and export components using React + ES6 + webpack?

ecmascript-6

reactjs

webpack