Wie importiere und exportiere ich Komponenten mit React + ES6 + Webpack?

Ich spiele mit Reactund ES6benutze babelund webpack. Ich möchte mehrere Komponenten in verschiedenen Dateien erstellen, in eine einzige Datei importieren und mit ihnen bündelnwebpack

Angenommen, ich habe einige Komponenten wie diese:

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

main-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')
);

Mit Webpack und dem folgenden Tutorial habe ich main.js:

import MyPage from './main-page.jsx';

Nach dem Erstellen und Ausführen des Projekts wird in meiner Browserkonsole der folgende Fehler angezeigt:

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

Was mache ich falsch? Wie kann ich meine Komponenten ordnungsgemäß importieren und exportieren?

Versuchen Sie, die Exporte in Ihren Komponenten standardmäßig zu verwenden :

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

Wenn Sie die Standardeinstellung verwenden, drücken Sie aus, dass Mitglied in diesem Modul sein wird, das importiert wird, wenn kein bestimmter Mitgliedsname angegeben wird. Sie können auch ausdrücken, dass Sie das bestimmte Mitglied mit dem Namen MyNavbar importieren möchten, indem Sie Folgendes tun: {MyNavbar} aus './comp/my-navbar.jsx' importieren; In diesem Fall ist keine Standardeinstellung erforderlich

Umschließen von Komponenten mit geschweiften Klammern, wenn keine Standardexporte vorhanden sind:

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

oder importieren Sie mehrere Komponenten aus einer einzelnen Moduldatei

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

Um eine einzelne Komponente in ES6 zu exportieren, können Sie export defaultFolgendes verwenden:

class MyClass extends Component {
 ...
}

export default MyClass;

Und jetzt verwenden Sie die folgende Syntax, um dieses Modul zu importieren:

import MyClass from './MyClass.react'

Wenn Sie mehrere Komponenten aus einer einzigen Datei exportieren möchten, sieht die Deklaration folgendermaßen aus:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

Und jetzt können Sie die folgende Syntax verwenden, um diese Dateien zu importieren:

import {MyClass1, MyClass2} from './MyClass.react'

MDN hat eine wirklich schöne Dokumentation für alle neuen Möglichkeiten zum Importieren und Exportieren von Modulen: ES 6 Import-MDN . Eine kurze Beschreibung in Bezug auf Ihre Frage, die Sie entweder haben könnten:

1. Die Komponente, die Sie exportiert haben, wurde als 'Standard'-Komponente deklariert, die dieses Modul exportiert hat: export default class MyNavbar extends React.Component {Wenn Sie also Ihre' MyNavbar 'importieren, müssen Sie KEINE geschweiften Klammern darum setzen : import MyNavbar from './comp/my-navbar.jsx';. Wenn Sie jedoch keine geschweiften Klammern um einen Import setzen, wird dem Dokument mitgeteilt, dass diese Komponente als "Exportstandard" deklariert wurde. Wenn nicht, erhalten Sie eine Fehlermeldung (wie Sie es getan haben).

2. Wenn Sie Ihre 'MyNavbar' beim Exportieren nicht als Standardexport deklarieren möchten : export class MyNavbar extends React.Component {, müssen Sie den Import von 'MyNavbar' in geschweifte Klammern setzen: import {MyNavbar} from './comp/my-navbar.jsx';

Ich denke, da Sie nur eine Komponente in Ihrer './comp/my-navbar.jsx'-Datei hatten, ist es cool, sie zum Standardexport zu machen. Wenn Sie mehr Komponenten wie MyNavbar1, MyNavbar2, MyNavbar3 hätten, würde ich weder diese noch sie als Standard festlegen und ausgewählte Komponenten eines Moduls importieren, wenn das Modul nichts als Standard deklariert hat, den Sie verwenden können:import {foo, bar} from "my-module"; where foo und bar sind mehrere Mitglieder Ihres Moduls.

Lesen Sie auf jeden Fall das MDN-Dokument, das gute Beispiele für die Syntax enthält. Hoffentlich hilft dies mit einer etwas genaueren Erklärung für alle, die mit ES 6 und dem Import / Export von Komponenten in React spielen möchten.

Ich hoffe das ist hilfreich

Schritt 1: App.js importiert (Hauptmodul) das Anmeldemodul

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

class App extends Component {
  render() {
    return (
      <Login />
    );
  }
}

export default App;

Schritt 2: Erstellen Sie einen Anmeldeordner und erstellen Sie die Datei login.js und passen Sie Ihre Anforderungen an, die automatisch in App.js Beispiel Login.js gerendert werden

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;

Es gibt zwei verschiedene Möglichkeiten, Komponenten in Reaktion zu importieren, und die empfohlene Methode ist die Komponentenmethode

1. Bibliotheksweg (nicht empfohlen)
2. Komponentenweg (empfohlen)

PFB Detailerklärung

Art des Importierens der Bibliothek

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

Dies ist nett und praktisch, aber es bündelt nicht nur Button und FlatButton (und ihre Abhängigkeiten), sondern die gesamten Bibliotheken.

Komponentenart des Imports

Eine Möglichkeit, dies zu vermeiden, besteht darin, nur das zu importieren oder zu benötigen, was benötigt wird, beispielsweise die Komponentenmethode. Verwenden Sie das gleiche Beispiel:

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

Dadurch werden nur Button, FlatButton und ihre jeweiligen Abhängigkeiten gebündelt. Aber nicht die ganze Bibliothek. Also würde ich versuchen, all Ihre Bibliotheksimporte loszuwerden und stattdessen die Komponentenmethode zu verwenden.

Wenn Sie nicht viele Komponenten verwenden, sollte dies die Größe Ihrer gebündelten Datei erheblich reduzieren.