如何使用 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>
);
}
}

主页

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`.

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

384281 次浏览
小开
最佳答案

尝试 违约ing 组件中的导出:

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

通过使用 default，您可以表示它将成为该模块中的成员，如果没有提供特定的成员名称，将导入该模块。还可以通过这样做来表示希望导入名为 MyNavbar 的特定成员:。我的导航栏。在本例中，不需要使用 default

小开

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

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

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

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

MDN 对所有导入和导出模块的新方法都有很好的文档，是 ES 6 进口-MDN。关于你的问题，简单描述一下，你可以选择:

  1. 将要导出的组件声明为该模块要导出的“默认”组件: 所以当导入你的 MyNavbar 时，你不需要在它周围加上花括号: import MyNavbar from './comp/my-navbar.jsx';。 但是不在导入前后加大括号就是告诉文档这个组件被声明为“导出默认值”。如果不是这样，你会得到一个错误(正如你所做的)。

  2. 如果你不想在导出‘ MyNavbar’时将其声明为默认导出: export class MyNavbar extends React.Component {，那么你必须将‘ MyNavbar’的导入用大括号括起来: import {MyNavbar} from './comp/my-navbar.jsx';

我认为既然你只有一个组成部分在你的’。我的导航栏。Jsx 的文件将其作为默认导出是很酷的。如果你有更多像 MyNavbar1，MyNavbar2，MyNavbar3这样的组件，那么我不会将其中任何一个或它们作为默认组件，并且当模块没有声明任何一个你可以使用的默认组件时，导入模块的选定组件: import {foo, bar} from "my-module";，其中 foo 和 bar 是模块的多个成员。

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

小开

要在 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'
小开

希望这对你有帮助

步骤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 Folder 并创建 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;
小开

在反应中导入组分有两种不同的方法，推荐的方法是组分导入法

  1. 图书馆方式(不推荐)
  2. 组件方式(推荐)

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

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


提交答案