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

Question

我正在玩React和ES6使用babel和webpack.我想在不同的文件中构建几个组件,导入一个文件并将它们捆绑在一起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的特定成员:从'./comp/my-navbar.jsx'导入{MyNavbar}; 在这种情况下,不需要默认值

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";where foo和bar是模块的多个成员.

绝对阅读MDN文档,它有很好的语法示例.希望这有助于为任何想要在React玩具ES 6和组件导入/导出的人提供更多解释.

Answer 5

我希望这是有帮助的

第一步：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;