Zunächst möchte ich sagen, dass ich neu bei Javascript bin und im ersten Moment auf die Welt reagiere, wenn meine Frage trivial ist, aber ich kann nicht finde diese Situation heraus. Ich werde den Beitrag bei Bedarf aktualisieren.
Ich möchte meine aktuelle Anwendung auf einzelne Seite Anwendung migrieren. Ich habe 3 Hauptseiten PageA, PageB und PageC (in Reaktion habe ich 3 Hauptkomponenten). Ich möchte zwischen diesen 3 Seiten/Komponenten wechseln können. Sagen wir, dass ich diesen LogoText habe, der die Komponente darstellt, die das Logo der Site darstellt. Ich möchte es in allen anderen Komponenten (einschließlich der PageA) haben und wenn ich darauf klicke, möchte ich die Hauptseite (PageA) rendern.
So versuche ich ein, es zu bauen mit und webpack reagieren. In diesem einfachen Beispiel habe ich eine Main Page-Komponente MainPage.js, die eine übergeordnete Komponente für alle Komponenten ist, die auf der Hauptseite sein sollten, und eine LogoText-Komponente, die die MainPage-Komponente darstellen sollte, wenn jemand darauf klickt. Wenn alle diese Komponenten in einer Datei sind und ich verwende nicht erfordern() alles funktioniert perfekt, aber wenn ich meine App in Module mit require() brechen und es mit webpack verpackt bekomme ich seltsames Verhalten. Ich kann die Mainpage-Komponente geladen werden und die Logotext Komponente korrekt in der Mainpage angezeigt, aber wenn ich auf dem Logotext klicken ich „Uncaught unveränderliche Verletzung: Elementtyp ist ungültig“ Ausnahme (click for screenshot)
erste Ausnahme :
react.js: 18798 Warnung: React.createElement: Typ sollte nicht null, undefined, boolean oder Zahl sein. Es sollte eine Zeichenfolge (für DOM-Elemente) oder eine ReactClass (für zusammengesetzte Komponenten) sein.
zweite Ausnahme:
react.js: 18354 Uncaught Invariant Verletzung: Elementtyp ist ungültig: erwartet eine Saite (für eingebaute Komponenten) oder eine Klasse/Funktion (für Verbundbauteile) bekam aber: object.
Ich habe die folgenden drei Klassen:
main.js:Uncaught Invariant Violation: Elementtyp ist ungültig (react, webpack, circular imports)
var MainPage = require("./MainPage.js")
ReactDOM.render(
<MainPage />,
document.getElementById('content')
);
MainPage.js:
var LogoText = require("./LogoText.js")
var MainPage = React.createClass({
render: function() {
return (
<div>
Hello page,
<LogoText />
</div>
);
}
});
module.exports = MainPage;
LogoText.js
var MainPage = require("./MainPage.js")
var LogoText = React.createClass({
changePage: function(e) {
ReactDOM.render(
<MainPage />,
document.getElementById('content')
);
},
render: function() {
return (
<span onClick={this.changePage}>logo</span>
);
}
});
module.exports = LogoText;
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script src="scripts/bundle.js"></script>
</body>
</html>
UPDATE 1: Hier ist meine webpack.config.js:
module.exports = {
entry: "./src/scripts/main.js",
output: {
path: "./src/scripts",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.js$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony'},
]
},
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
};
post the webpack.config.js, ich sehe keinen offensichtlichen Fehler im reaction code – JordanHendrix
Ich habe den Post aktualisiert, der meinen "webpack.config.js" Dateiinhalt einfügt –
ReactDOM.render sollte nicht in LogoText sein. Du denkst nicht in React. –