Warum kann ich in ReactJS nicht von außen auf die Komponentenmethoden zugreifen? Warum ist es nicht möglich und gibt es eine Möglichkeit, es zu lösen?
Betrachten Sie den Code:
var Parent = React.createClass({
render: function() {
var child = <Child />;
return (
<div>
{child.someMethod()} // expect "bar", got a "not a function" error.
</div>
);
}
});
var Child = React.createClass({
render: function() {
return (
<div>
foo
</div>
);
},
someMethod: function() {
return 'bar';
}
});
React.renderComponent(<Parent />, document.body);
javascript
reactjs
dom
user1518183
quelle
quelle
Pubsub
?Antworten:
React bietet eine Schnittstelle für das, was Sie über das
ref
Attribut tun möchten . Weisen Sie eine Komponente a zuref
, und ihrcurrent
Attribut ist Ihre benutzerdefinierte Komponente:Hinweis : Dies funktioniert nur, wenn die untergeordnete Komponente gemäß der hier aufgeführten Dokumentation als Klasse deklariert ist: https://facebook.github.io/react/docs/refs-and-the-dom.html#adding-a- Ref-to-a-Class-Komponente
Update 2019-04-01: Das Beispiel wurde geändert, um eine Klasse und die
createRef
neuesten React-Dokumente zu verwenden.Update 19.09.2016: Das Beispiel wurde geändert, um den Ref-Rückruf gemäß Anleitung aus den
ref
String-Attributdokumenten zu verwenden .quelle
props
und wird entsprechend neu gerendert.{(child) => this._child = child}
dies ändern, wird eine Funktion erstellt, die immer zurückgegeben wirdtrue
, aber dieser Wert wird vom React-ref
Attribut nicht verwendet .Wenn Sie Funktionen für Komponenten von außerhalb von React aufrufen möchten, können Sie sie für den Rückgabewert von renderComponent aufrufen:
Die einzige Möglichkeit, ein Handle für eine React Component-Instanz außerhalb von React zu erhalten, besteht darin, den Rückgabewert von React.renderComponent zu speichern. Quelle .
quelle
Wenn die Methode für Child wirklich statisch ist (kein Produkt der aktuellen Requisiten, Status), können Sie sie alternativ definieren
statics
und dann wie eine statische Klassenmethode darauf zugreifen. Beispielsweise:quelle
Ab React 16.3
React.createRef
kann verwendet werden (ref.current
zum Zugriff verwenden)quelle
Seit React 0.12 wurde die API geringfügig geändert . Der gültige Code zum Initialisieren von myChild lautet wie folgt:
quelle
Sie könnten es auch so machen, nicht sicher, ob es ein guter Plan ist: D.
quelle
Wie in einigen Kommentaren erwähnt, wird
ReactDOM.render
die Komponenteninstanz nicht mehr zurückgegeben. Sie können einenref
Rückruf übergeben, wenn Sie das Stammverzeichnis der Komponente rendern, um die Instanz abzurufen:und:
quelle
Ein anderer Weg so einfach:
Funktion außerhalb:
Binde es:
Das vollständige Tutorial finden Sie hier: Wie kann man "dies" einer Reaktionskomponente von außen verwenden?
quelle