Ich spiele mit React
und ES6
benutze babel
und 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?
reactjs
ecmascript-6
webpack
itaied
quelle
quelle
export
Keyword-Details hier . Derzeit wird es von keinem der Webbrowser nativ unterstützt.Antworten:
Versuchen Sie, die Exporte in Ihren Komponenten standardmäßig zu verwenden :
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
quelle
Umschließen von Komponenten mit geschweiften Klammern, wenn keine Standardexporte vorhanden sind:
oder importieren Sie mehrere Komponenten aus einer einzelnen Moduldatei
quelle
named exports
in es6 und eine sicherere Methode zum Exportieren von developer.mozilla.org/en/docs/web/javascript/reference/… als die Verwendung vondefault
Um eine einzelne Komponente in ES6 zu exportieren, können Sie
export default
Folgendes verwenden:Und jetzt verwenden Sie die folgende Syntax, um dieses Modul zu importieren:
Wenn Sie mehrere Komponenten aus einer einzigen Datei exportieren möchten, sieht die Deklaration folgendermaßen aus:
Und jetzt können Sie die folgende Syntax verwenden, um diese Dateien zu importieren:
quelle
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:
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).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.
quelle
Ich hoffe das ist hilfreich
Schritt 1: App.js importiert (Hauptmodul) das Anmeldemodul
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
quelle
Es gibt zwei verschiedene Möglichkeiten, Komponenten in Reaktion zu importieren, und die empfohlene Methode ist die Komponentenmethode
PFB Detailerklärung
Art des Importierens der Bibliothek
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:
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.
quelle