Ich habe eine Komponente mit einem Geschäft mit react, redux und react-redux gemacht. Die Bündelung des Codes erfolgt mit dem Webpack (bitte beachten Sie die unten angehängten Codes)
Als ich die webpack build-Komponente in einem anderen react-Projekt verwenden wollte, sah ich mich mit folgenden Problemen konfrontiert:
Warnung: React.createElement: type sollte nicht null sein, undefined, Boolean oder Zahl. Es sollte eine Zeichenfolge (für DOM-Elemente) oder eine sein ReactClass (für zusammengesetzte Komponenten).
Ungefasste invariante Verletzung: Elementtyp ist ungültig: erwartet a Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion (für Composite Komponenten), aber haben: undefined.
Dann ging ich weiter und machte die folgende Änderung im Code, früher hatte ich eine Destrukturierungsaufgabe wie unten für connect und bindActionCreators
Dann habe ich es wie folgt geändert, indem ich die geschweiften Klammern um connect und bindActionCreators
lösche
Aber danach bin ich mit dem untenstehenden Fehler konfrontiert, da ich denke, dass dies etwas damit zu tun hat, dass babel ES6 zu ES5 transpiliert, aber nicht sicher ist, welche Schritte zu befolgen sind, um eine Antwort oder einige Hinweise zu erhalten bekomme ich das gelöst?
Uncaught TypeError: (0, _reactRedux2.default) ist keine Funktion
Uncaught TypeError: Die Eigenschaft 'PlayerWrapper' von undefined
kann nicht gelesen werden
Komponentencode
Komponenten-Wrapper-Code
Webpack-Build-Datei
Ich habe gerade einige Zeit damit verbracht, den zweiten Fehler, der hier beschrieben wurde, zu debuggen und habe dabei ein wenig über die ES6-Import-Syntax gelernt.
Die Zeile:
import connect von 'react-redux';
importiert den Standard Export von der Bibliothek react-redux . Dies ist die Quelle des Fehlers:
Uncaught TypeError: (0, _reactRedux2.default) ist keine Funktion
Ändern zu:
Importieren { Verbinden Sie } mit 'react-redux';
importiert das Objekt aus der react-redux-Bibliothek namens connect, was im speziellen Fall das ist, was Sie wollen. Beachten Sie die geschweiften Klammern
Lesen Sie die MDN-Dokumentation hier
Ich hatte auch einen ähnlichen Fehler wie der erste:
Warnung: React.createElement: type sollte nicht null, undefined, Boolean oder Zahl sein. Es sollte eine Zeichenfolge (für DOM-Elemente) oder eine ReactClass (für zusammengesetzte Komponenten) sein.
wenn ich meine definierten Komponenten nicht wie oben korrekt importiert habe.
Der Fehler weist darauf hin, dass Sie in Ihrem Aufruf von reactDOM.render (den Sie nie anzeigen) nur einen Funktions- oder Klassennamen anstelle einer Komponenteninstanz übergeben haben.
Zum Beispiel ist das folgende Beispiel falsch:
ReactDOM.render (MyComponent, document.getElementById ('MyComponent'));
Und die Lösung besteht darin, den ersten Parameter in eine Komponenteninstanz umzuwandeln, indem Sie ihn in spitze Klammern einschließen:
ReactDOM.render (& lt; MeineKomponente / & gt ;, document.getElementById ('MyComponent'));
Der Fehler bedeutet, dass Sie irgendwo versuchen, etwas darzustellen, das keine tatsächliche Komponente (oder Zeichenfolge) ist
Wie bereits erwähnt, müssen Sie connect und bindActionCreators destrukturieren, da sie nicht der Standard-Export ihrer jeweiligen Pakete sind.
Was Ihren Fehler betrifft, ist es genauso möglich, dass wenn Sie versuchen, Requisiten zu rendern, nichts dort zu rendern ist (zB seine Null oder undefiniert), aber da Sie den Code, wo Sie ReactDOM.render genannt haben, nicht gepostet haben bin mir sicher.
Tags und Links reactjs redux webpack react-redux babeljs