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

我正在使用babel和webpack玩React和ES6。我想在不同的文件中构建几个组件，导入到一个文件中，并将它们与webpack 捆绑在一起

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

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

主页面.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`.

我做错了什么？如何正确导入和导出组件？

尝试默认在组件中导出：

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 navbar.jsx'；在这种情况下，不需要默认

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

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。关于你的问题，你可以简单描述一下：

已将要导出的组件声明为此模块正在导出的"默认"组件：export default class MyNavbar extends React.Component {，因此在导入"MyNavbar"时，不必在其周围加大括号：import MyNavbar from './comp/my-navbar.jsx';。不过，不在导入周围放大括号是在告诉文档该组件已声明为"导出默认值"。如果不是这样，你会得到一个错误（就像你做的那样）。
如果您在导出'MyNavbar'时不想将其声明为默认导出：export class MyNavbar extends React.Component {，则必须将'MyNavbar的导入用大括号括起来：import {MyNavbar} from './comp/my-navbar.jsx';

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

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

我希望这对有帮助

步骤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;

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及其各自的依赖项。但不是整个图书馆。因此，我会尝试取消所有库导入，转而使用组件方式。

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

相关内容

最新更新

热门标签：