Ich habe gelegentlich reaktionsfähige Komponenten, die konzeptionell aussagekräftig sind und die ich zurücksetzen möchte. Das ideale Verhalten wäre gleichbedeutend mit dem Entfernen der alten Komponente und dem Lesen einer neuen, makellosen Komponente.
React bietet eine Methode setState
, mit der der explizite Status der Komponenten festgelegt werden kann, die jedoch implizite Status wie Browserfokus und Formularstatus ausschließt und den Status der untergeordneten Komponenten ausschließt. Es kann eine schwierige Aufgabe sein, all diesen indirekten Zustand zu erfassen, und ich würde es vorziehen, ihn rigoros und vollständig zu lösen, anstatt mit jedem neuen überraschenden Zustand einen Schlag ins Maul zu spielen.
Gibt es eine API oder ein Muster, um dies zu tun?
Bearbeiten: Ich habe ein triviales Beispiel gemacht, das den this.replaceState(this.getInitialState())
Ansatz demonstriert und dem this.setState(this.getInitialState())
Ansatz gegenüberstellt: jsfiddle - replaceState
ist robuster.
key
in diesem Fall einfach kein fest .)replaceState()
undgetInitialState()
werden in den neuen ES6 Klasse-Stil reactjs beide veraltet. Verwenden Siethis.setState(this._getInitialState())
stattdessen. Außerdem können Sie Ihre eigene Statusinitialisierungsfunktion nicht benennengetInitialState()
- reagieren löst eine Warnung aus - rufen Sie etwas anderes auf und tun dies explizitstate = this._getInitialState()
in der obersten Ebene der Klasse.Sie sollten tatsächlich vermeiden
replaceState
undsetState
stattdessen verwenden.Die Dokumente sagen, dass
replaceState
"in einer zukünftigen Version von React möglicherweise vollständig entfernt wird". Ich denke, es wird definitiv entfernt, weilreplaceState
es nicht wirklich mit der Philosophie von React übereinstimmt. Es erleichtert es, dass sich eine React-Komponente wie ein Schweizer Messer anfühlt. Dies wirkt dem natürlichen Wachstum einer React-Komponente entgegen, die kleiner und zweckmäßiger wird.Wenn Sie in React auf Generalisierung oder Spezialisierung verzichten müssen, streben Sie eine Spezialisierung an. Als Konsequenz sollte der Statusbaum für Ihre Komponente eine gewisse Sparsamkeit aufweisen (es ist in Ordnung, diese Regel geschmackvoll zu brechen, wenn Sie ein brandneues Produkt auf den Markt bringen).
Wie auch immer, so machst du es. Ähnlich wie Bens (akzeptierte) Antwort oben, aber so:
Außerdem müssen Sie (wie auch Ben sagte) diesen DOM-Knoten entfernen, um den "Browser-Status" zurückzusetzen. Nutzen Sie die Kraft des Reiches und verwenden Sie eine neue
key
Requisite für diese Komponente. Das neue Rendering ersetzt diese Komponente im Großhandel.Referenz: https://facebook.github.io/react/docs/component-api.html#replacestate
quelle
this.replaceState
? Weil es so ist.getInitialState()
(z. B. in einem onClick-Handler) anzugeben. In diesem Fall wäre diese neue Immobilie nach dem 2. noch vorhandengetInitialState()
.getInitialState
. Ähnlich wie beim Deklarieren aller Ihrer Variablen in einer JS-Funktion oben in der Funktion. Randnotiz: Ben Alperts Lösung ist nahezu identisch mit meiner ... und er ist ein offizieller React-Betreuer!Wenn
key
Sie dem Element, das Sie neu initialisieren müssen, ein Attribut hinzufügen, wird es jedes Mal neu geladen, wenn sich das Element ändertprops
oderstate
dem Element zugeordnet wird.Hier ist ein Beispiel:
quelle