Mit diesem Tutorial versuche ich, ReactJS mit Schienen zum Laufen zu bringen . Ich erhalte diesen Fehler:
Uncaught ReferenceError: React is not defined
Aber ich kann auf das React-Objekt in der Browserkonsole zugreifen.
Ich habe auch public / dist / turbo-react.min.js hinzugefügt, wie hier beschrieben , und auch Zeile in application.js hinzugefügt , wie in dieser Antwort beschrieben , ohne Erfolg. Zusätzlich gibt der Fehler://= require components
var React = require('react')
Uncaught ReferenceError: require is not defined
Kann mir jemand vorschlagen, wie ich das lösen kann?
[EDIT 1]
Quellcode als Referenz:
Dies ist meine comments.js.jsx
Datei:
var Comment = React.createClass({
render: function () {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.comment}
</div>
);
}
});
var ready = function () {
React.renderComponent(
<Comment author="Richard" comment="This is a comment "/>,
document.getElementById('comments')
);
};
$(document).ready(ready);
Und das ist mein index.html.erb
:
<div id="comments"></div>
quelle
Ich habe diesen Fehler erhalten, weil ich verwendet habe
import ReactDOM from 'react-dom'
ohne zu importieren reagieren, sobald ich es unten geändert habe:
import React from 'react'; import ReactDOM from 'react-dom';
Der Fehler wurde behoben :)
quelle
ReactDOM
in meiner Hauptdatei verwende, dachte ich, ich kann (und sollte) den Verweis auf loswerdenReact
. Na ja, etwas gelernt.Mögliche Gründe sind: 1. Sie haben React.JS nicht auf Ihre Seite geladen, 2. Sie haben es nach dem obigen Skript auf Ihre Seite geladen. Die Lösung besteht darin, die JS-Datei vor dem oben gezeigten Skript zu laden.
PS
Mögliche Lösungen.
react
im Abschnitt "Extern" in der Webpack-Konfiguration erwähnen, müssen Sie die reaktions-js-Dateien vorher direkt in Ihr HTML ladenbundle.js
import React from 'react';
quelle
Wenn Sie Webpack verwenden, können Sie React bei Bedarf laden lassen, ohne es explizit
require
in Ihren Code aufnehmen zu müssen.Zu webpack.config.js hinzufügen :
plugins: [ new webpack.ProvidePlugin({ "React": "react", }), ],
Siehe http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin
quelle
Versuchen Sie hinzuzufügen:
import React from 'react' import { render } from 'react-dom' window.React = React
vor der
render()
Funktion.Dies verhindert manchmal, dass ein Fehler in der Popup-Datei angezeigt wird:
Durch Hinzufügen
React
zum Fenster werden diese Probleme gelöst.quelle
Hinzufügen zu Santosh:
Sie können React by laden
import React from 'react'
quelle
import React, { Component, PropTypes } from 'react';
Das kann auch funktionieren!
quelle
Ich habe diesen Fehler erhalten, weil ich in meinem Code eine Komponentendefinition mit Kleinbuchstaben
react.createClass
anstelle von Großbuchstaben falsch geschrieben habeReact.createClass
.quelle
Ich stand vor dem gleichen Problem. Ich habe es durch Importieren gelöst
React
undReactDOM
wie folgt:import React from 'react'; import ReactDOM from 'react-dom';
quelle
Der angezeigte Fehler
Nach diesem Import reagieren
Zum Schluss React-Dom importieren
Wenn der Fehler "Reagieren" nicht definiert ist, fügen Sie bitte ==> hinzu
import React from 'react';
Wenn der Fehler "reactDOM" nicht definiert ist, fügen Sie bitte ==> hinzu
import ReactDOM from 'react-dom';
quelle
Wenn Sie mit Typoskript, stellen Sie sicher , dass Sie
tsconfig.json
hat"jsx": "react"
innerhalb"compilerOptions"
.quelle