Ich habe Container und Komponente getrennt und stehe nun vor den Problemen mit dem erneuten Rendern der Komponente.
render() {
return <DomainEdit schema={this.props.schema} domain={this.domain} formData={this.props.formData} updateSubType={this.updateSubType} types={this.props.types}/>;
}
Ich sende eine updateSubTypeMethode, die eine Rückrufmethode ist, wenn etwas im Formular geändert wird.
Nachdem es geändert wurde, schicke ich zurück, was geändert wurde, und muss this.props.schema aktualisieren, um die Komponente mit dem neuen Schema neu zu rendern.
Das Problem, mit dem ich konfrontiert bin, ist, dass die Callback-Methoden thisder Geltungsbereich der Komponente und nicht der Container selbst sind, mit anderen Worten, die Komponente hat nur die Argumente, die ich in der Render-Methode gesendet habe, was ein Problem darstellt, da ich nicht auf den Container zugreifen kann props und rendern Sie die Komponente neu.
Wie könnte ich die Komponente in der Rückrufmethode, die im Container definiert ist, neu rendern?
Es sieht nach einem Kontextbindungsproblem aus.
Wenn updateSubType innerhalb von DomainEdit aufgerufen werden soll und thisdieser Callback immer noch auf die Containerreferenz verweist, müssen Sie updateSubType an die Containerinstanz binden.
Dafür stehen zwei Möglichkeiten zur Verfügung: Im Konstruktor des Containers neu definieren this.updateSubType = this.updateSubType.bind(this);
Oder wenn Sie ES6 verwenden, definieren Sie updateSubType auf diese Weise:
updateSubType = () => {
...method definition
}
Die Notation der Pfeilfunktion ( () => {}) bindet die Funktion automatisch an die umgebende Instanz.
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen