2017-03-02 8 views
1

Ich bekomme wahrscheinlich etwas nicht richtig mit meinem Verständnis von Staaten & Requisiten Requisiten. Dies verwendet React, Redux-basierte App.React Lifecycle Events - Kind-Komponente erbt Old State Requisiten

Szenario:

Ich habe eine globale SVG Komponente, die die Dimensionen des Darstellungsfeldes aus der App innerhalb der componentDidMount Methode erhält.

Der Standard (bei der Initialisierung der app) Stütze der SVG im state sind:

dimension : { 
width : 0, 
height : 0 
} 

Die componentDidMount die width & height Werte aus dem DOM abruft und löst die Werte an den Staat.

Jetzt habe ich ein Kind Bestandteil SVG Komponente, die wiederum die aktualisierten svg Breite & Höhenwerte zur Berechnung der Standard Sichtbox & Update den Zustand benötigt. Dies muss nur einmal bei der Montage (wichtiger Punkt) ausgeführt werden, daher ist die Berechnung der viewbox in der componentDidMount der untergeordneten Komponente.

was passiert:

Aber ich denke, da der Batch-Reaktion auf das DOM zu aktualisieren, die Requisiten für das Kind-Komponente übergeben sind die Standardanfangsbreite & Höhenwerte, nicht der aktualisierte Zustand nach SVG Komponente componentDidMount.

Frage:

Wie kann ich den aktualisierten Zustand zu componentDidMount des Kindes Komponente zu übergeben. Hinweis:

  • ich nicht componentDidUpdate verwenden kann, was bedeuten würde, dass jedes Mal wenn die Komponente aktualisiert wird, berechnen sie die Standardwerte & die Ansicht wieder aktualisieren, damit über Reiten die Benutzerposition.
+1

Wenn Sie den Status in * componentDidMount() * festlegen, wird die Komponente erneut gerendert. Wenn Sie die Requisiten von der übergeordneten Komponente verwenden möchten, sollten Sie in * componentWillReceiveProps (nextProps) * arbeiten, das jedes Mal aufgerufen wird, wenn die Komponente reps von der übergeordneten Komponente empfängt. –

+0

Können Sie Ihren Code anzeigen? –

+0

@MarioSantini danke, das hat es geschafft. Ich habe diesen Lifecycle-Event komplett vergessen:! Wenn du das als Antwort posten willst, akzeptiere ich es als erstes. – Kayote

Antwort

1

Wenn Sie den Status in componentDidMount() setzen, wird die Komponente erneut gerendert.

Wenn Sie die Requisiten verwenden möchten, sollten Sie in componentWillReceiveProps arbeiten (nextProps), dass im Lebenszyklus reagieren, um die Komponente receave Requisiten von Elternkomponente jedes Mal aufgerufen wird.

Das scheint, was Sie bis jetzt erreichen wollen.

0

Was in Ihrem Fall passiert, ist, dass vor der componentDidMount der übergeordneten Komponente ausführt, Ihr Kind Komponente gemacht wird und somit erhält er die default Requisiten. So sind die Requisiten, die in Ihrem Kind in der componentDidMount des Mutter aktualisiert, wie die aktualisierten Requisiten

Sie können von componentWillReceiveProps Funktion machen in der untergeordneten Komponente, um den Zustand basierend auf den aktualisierten Requisiten widerspiegeln. Dies wird jedoch jedes Mal ausgeführt, wenn die Requisiten vom Parent aktualisiert werden. Sie können also eine Requisite vom Parent übergeben, die mit einem bestimmten Wert in der componentDidMount des Parents und später einen anderen Wert hat. Basierend auf dieser Props in componentWillReceiveProp können Sie den Ausgangszustand der untergeordneten Komponente festlegen.

+0

Lassen Sie mich wissen, wenn Sie irgendwelche Zweifel haben –

+0

Vielen Dank für die Beschreibung Shubham. Ich glaube nicht, der erste Para ist richtig. Korrigiere mich, wenn ich falsch liege, aber die beiden werden auf einmal auf DOM geschoben, daher sind die Statuswerte gleich. – Kayote

+1

Ja die beiden werden auf einmal auf DOM geschoben. Aber wie du sagst, dass der componentDidMount den Status aktualisiert hat und ihn als Requisite übergibt, braucht diese Aktion Zeit. und daher wird der initialstate nur an die Kindkomponente übergeben. Nur wenn der Status aktualisiert wird, tritt der rerender auf und die aktualisierten Requisiten werden übergeben –

Verwandte Themen