Question

我使用React和ES6与babel和webpack玩游戏。我想在不同的文件中构建几个组件，导入一个文件并用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>
      );
    }
}

主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

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

#!/bin/bash

STR=$(curl http://www.billboard.com/charts/billboard-200)

I=0

while true; do 
    let "I += 1"
    #Find album
    STR=${STR#*Song Hover-}
    SONG=${STR%%div*}
    SONG=${SONG:0:${#SONG}-5}
    STR=${STR#*div}
    SONG = ${SONG/"&#039;"/"'"} #This line does not work
    echo ${SONG}
    SONGS[I]=${SONG}

    #find artist
    STR=${STR#*Artist Name}
    ARTIST=${STR%%a>*}
    ARTIST=${ARTIST:3:${#ARTIST}-6}
    STR=${STR#*a>}
    echo ${ARTIST}
    ARTISTS[I]=${ARTIST}


    TEST=${STR#*Song Hover-}
    if [ ${#TEST} -eq ${#STR} ]; then
        break;
    fi
done

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

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

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。关于您可以提出的问题的简要描述：

声明您导出的组件为＆＃39;默认＆＃39;此模块导出的组件： export default class MyNavbar extends React.Component {，等等，在导入您的“MyNavbar”时你不得不在它周围放上花括号：import MyNavbar from './comp/my-navbar.jsx';。虽然没有在导入中放置大括号，但是告诉文档该组件被声明为＆＃39;导出默认值＆＃39;。如果您没有收到错误（正如您所做的那样）。
如果你不想申报你的MyNavbar＆＃39;作为导出时的默认导出：export class MyNavbar extends React.Component {，那么您必须将大括号中的＆＃39; MyNavbar包装为： import {MyNavbar} from './comp/my-navbar.jsx';

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

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

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中导入组件有两种不同的方式，推荐的方式是Component方式

库方式（不推荐）
组件方式（推荐）

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导入和导出组件？

6 个答案: