Ich möchte eine Methode aufrufen, die von einer React-Komponente aus der Instanz eines React-Elements verfügbar gemacht wird.
Zum Beispiel in dieser jsfiddle . Ich möchte die alertMessage
Methode aus der HelloElement
Referenz aufrufen .
Gibt es eine Möglichkeit, dies zu erreichen, ohne zusätzliche Wrapper schreiben zu müssen?
Bearbeiten (kopierter Code von JSFiddle)
<div id="container"></div>
<button onclick="onButtonClick()">Click me!</button>
var onButtonClick = function () {
//call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage()
console.log("clicked!");
}
var Hello = React.createClass({displayName: 'Hello',
alertMessage: function() {
alert(this.props.name);
},
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
}
});
var HelloElement = React.createElement(Hello, {name: "World"});
React.render(
HelloElement,
document.getElementById('container')
);
Antworten:
Es gibt zwei Möglichkeiten, auf eine innere Funktion zuzugreifen. Eine Instanzebene, wie Sie möchten, eine andere statische Ebene.
Beispiel
Sie müssen die Funktion bei der Rückkehr von aufrufen
React.render
. Siehe unten.Statisch
Schauen Sie sich ReactJS Statics an . Beachten Sie jedoch, dass eine statische Funktion nicht auf Daten auf Instanzebene zugreifen
this
kannundefined
.Dann mach es
HelloRendered.alertMessage()
.quelle
ref
die eine Funktion ist, die mit der Instanz als Parameter aufgerufen wird. Auf diese Weise können Sie auch auf Objekte zugreifen, die sich nicht auf der obersten Ebene befinden. Wenn Sie beispielsweise rendern<MuiThemeProvider><Hello ref={setHelloRef} /></MuiThemeProvider>
, wird die richtige Referenz an IhresetHelloRef
Funktion übergeben und nicht an eineMuiThemeProvider
.Sie können gerne tun
Jetzt können Sie von außerhalb dieser Komponente wie folgt aufrufen
quelle
Ich habe so etwas gemacht:
Und dann woanders:
Ich habe diesen genauen Code nicht getestet, aber dies entspricht dem, was ich in einem meiner Projekte getan habe, und es funktioniert gut :). Natürlich ist dies ein schlechtes Beispiel, Sie sollten nur Requisiten dafür verwenden, aber in meinem Fall hat die Unterkomponente einen API-Aufruf ausgeführt, den ich in dieser Komponente behalten wollte. In einem solchen Fall ist dies eine gute Lösung.
quelle
this.cowCallbacks.say('moo')
this
den Rückruf (der eine Instanz von Cow sein wird) zu übergebencallbacks
.Da die
render
Methode den zurückgegebenen Wert möglicherweise nicht mehr unterstützt, wird jetzt empfohlen, dem Stammelement eine Rückrufreferenz zuzuweisen. So was:auf die wir dann mit window.helloComponent zugreifen können, und auf jede ihrer Methoden kann mit window.helloComponent.METHOD zugegriffen werden.
Hier ist ein vollständiges Beispiel:
quelle
ref={component => {this.setState({ helloComponent: component; })}}
Dann im Klick-Handler ...this.state.helloComponent.alertMessage();
Sie können diese Methode aus dem Fenster mit aufrufen
window.alertMessage()
.quelle
Wenn Sie in ES6 sind, verwenden Sie einfach das Schlüsselwort "static" für Ihre Methode aus Ihrem Beispiel:
static alertMessage: function() { ...
},
Hoffnung kann jedem da draußen helfen :)
quelle
Sie können
onClick
dem div einfach einen Handler mit der Funktion hinzufügen (onClick
ist Reacts eigene Implementierung vononClick
) und Sie können in{ }
geschweiften Klammern auf die Eigenschaft zugreifen , und Ihre Warnmeldung wird angezeigt.Wenn Sie statische Methoden definieren möchten, die für die Komponentenklasse aufgerufen werden können, sollten Sie statische Methoden verwenden. Obwohl:
"In diesem Block definierte Methoden sind statisch. Dies bedeutet, dass Sie sie ausführen können, bevor Komponenteninstanzen erstellt werden. Die Methoden haben keinen Zugriff auf die Requisiten oder den Status Ihrer Komponenten. Wenn Sie den Wert von Requisiten in einer Statik überprüfen möchten Methode, lassen Sie den Aufrufer in den Requisiten als Argument an die statische Methode übergeben. " ( Quelle )
Ein Beispielcode:
Hoffe das hilft dir ein bisschen, denn ich weiß nicht ob ich deine Frage richtig verstanden habe, also korrigiere mich wenn ich sie falsch interpretiert habe :)
quelle
Es scheint, dass die Statik veraltet ist und die anderen Methoden zum Anzeigen einiger Funktionen
render
verworren sind. In der Zwischenzeit hat diese Stack Overflow-Antwort zum Debuggen von React , obwohl sie hackig zu sein scheint, den Job für mich erledigt.quelle
Methode 1
using ChildRef
:Methode 2:
using window register
quelle
Mit
React hook - useRef
Viel Glück...
quelle
Ich verwende diese Hilfsmethode, um Komponenten zu rendern und eine Komponenteninstanz zurückzugeben. In dieser Instanz können Methoden aufgerufen werden.
quelle