wie Erzeuge ein reagieren Komponente mit ReactDOM Rendern
_Header (cshtml)
<div id="Help"></div>
export default class Help {
ReactDOM.render(
<Help/>,
document.getElementById('Help')
);
}
Help.js (component)
}
Mein Ziel ist es, machen eine Hilfe-Taste auf die Kopfzeile.
Habe ich div-tag mit der id helfen -, modal -, und ein
Komponente rendering Schaltfläche "Hilfe". Bin ich Verbindung die zwei in help.js
durch ReactDOM.Rendern(.........);
wenn ich das mache npm run dist und dotnet ausführen , und sehen Sie die browser
Ich konnte nicht sehen, die Schaltfläche Kopfzeile . Kann einer helfen, auf diese bitte ??
Sind Sie immer Fehler in der Konsole? können Sie überprüfen, wenn Sie laod die Seite, die
Keine Fehler in der Konsole... wenn ich überprüfen header, es ist einfach zu zeigen, dass div-tag (kein Knopf)
Downvote. Dies ist buchstäblich auf der front-Seite von facebook.github.io/reagieren
Help-modal
div tatsächlich existiert?Keine Fehler in der Konsole... wenn ich überprüfen header, es ist einfach zu zeigen, dass div-tag (kein Knopf)
Downvote. Dies ist buchstäblich auf der front-Seite von facebook.github.io/reagieren
InformationsquelleAutor LOKI | 2016-11-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wird, die Sie anrufen ReactDOM.render innerhalb ein Reagieren Komponente nicht gerendert.
Call ReactDOM Rendern außerhalb der Klassendefinition für die Hilfe
Zum Rendern Ihrer Schaltfläche auf dem Bildschirm:
Das ist es.
Verwirrung zu vermeiden, sollten versuchen, und geben Sie Ihre Komponenten aussagekräftige Namen. Die Benennung sowohl von Ihnen Hilfe bekommen kann verwirrend sein, wenn Sie versuchen, zu importieren in ein anderes (das in diesem Fall nicht notwendig).
Wenn Sie in der Tat wollte das nest der Hilfe-Komponente in einer app.js/index.js root-level-Komponente, wäre es notwendig, exportieren Sie das element, so dass die Deklaration der Klasse Zeile würde wie folgt geändert werden:
export default class Help extends Component {
dann in Ihrer übergeordneten Komponente müssen Sie importieren Sie Sie mit etwas wie:
import Help from './components/Help';
UPDATE:
gerade bemerkt, es war ein Typ mit:
import RaisedButton from 'material-ui/RaisedButon';
es fehlt ein 't' in RaisedButton!
werden sollten:
import RaisedButton from 'material-ui/RaisedButton';
Es geht nicht nur um die Beseitigung helppage.js. ReactDOM.Rendern aufgerufen wird außerhalb der Klassendefinition und erhält den <Hilfe> Komponente oben definiert. Es wäre hilfreich, für die Sie hinzufügen, wie Sie testen diese sowie die Erweiterung auf Ihre html-Datei.
importieren Reagieren, { Component } von 'reagieren'; import Dialog von 'material-ui/Dialog; import FlatButton von 'material-ui/FlatButton'; import RaisedButton von 'material-ui/RaisedButon'; class Help extends Komponente { render() { return ( <div> <RaisedButton label="Hilfe"/> </div>");} } ReactDOM.render(<Hilfe>,document.getElementById('Hilfe-modal'));Dies ist, was ich getan habe , Können Sie mich korrigieren, wenn ich falsch bin??
Bemerkt einen fehlenden import (ReactDOM) und auch ein Typ mit RaisedButton. Habe ich geändert, meine Antwort entsprechend.
InformationsquelleAutor Pineda
Müssen Sie exportieren die Hilfe-Komponente
Help.js
Und keine Notwendigkeit, zu Reagieren, erstellen Sie eine Komponente zum Rendern der HelpComponent
Helppage.js
InformationsquelleAutor Shubham Khatri