React生命週期事件 - 子組件繼承舊狀態道具

我對React中的狀態&道具的理解可能會讓事情不正確。這是使用React，基於Redux的應用程序。React生命週期事件 - 子組件繼承舊狀態道具

場景：

我有一個全球性的SVG部件，它獲取視口的尺寸從componentDidMount方法中的應用。在state的SVG的

缺省（根據該應用程序的初始化）道具有：

dimension : { 
width : 0, 
height : 0 
}

的componentDidMount從DOM 檢索width & height值並分派的值的狀態。

現在我有SVG組件，它需要更新的SVG寬度&高度值重新計算默認視框&更新狀態的子組件。這需要在安裝（重要點）後僅執行一次，因此viewbox的計算位於子組件的componentDidMount中。

發生了什麼：

不過，我猜是因爲發生反應批量更新DOM，傳遞給子組件的道具都是默認的初始寬度&高度值，而不是更新的狀態後SVG組件的componentDidMount。

問：

如何我可以通過更新的狀態到子組件的componentDidMount。注：

我不能使用componentDidUpdate，這意味着，這每次的分量被更新，它會計算缺省值&再次更新視圖，從而壓倒用戶位置。

來源

2017-03-02 Kayote

如果您在* componentDidMount（）*中設置狀態，它將重新呈現該組件。如果你想使用來自父組件的道具，你應該在* componentWillReceiveProps（nextProps）*中工作，每當組件從父組件接收道具時調用它。 –

你能顯示你的代碼嗎？ –

@MarioSantini謝謝你，那就做到了。我完全忘記了這個生命週期事件：！如果你想發佈這個答案，我會接受它，因爲它是第一個。 – Kayote

如果你設置的狀態爲componentDidMount（）比它會重新渲染組件。

如果你想使用道具，你應該在componentWillReceiveProps（nextProps）工作，即在陣營生命週期的每一次所謂從父組件的組件receave 道具。

這似乎是你到目前爲止努力實現的目標。

來源

2017-03-02 17:02:55

你的情況會發生什麼，在父組件的componentDidMount執行之前，你的子組件會被渲染，因此它會收到default道具。所以在父母的componentDidMount中獲得更新的道具將會反映在您的孩子身上作爲更新的道具

您可以使用子組件中的componentWillReceiveProps函數來根據更新的道具設置狀態。但是，每當道具從父項更新時，這個就會被執行，所以你可以做的是從父項中傳遞一些道具，這些道具在父項的componentDidMount中被設置爲一個特定的值，後來有一個不同的值。根據componentWillReceiveProp中的這些道具，您可以設置子組件的初始狀態。

來源

2017-03-02 13:19:32

讓我知道你是否有任何疑問 –

謝謝你的描述Shubham。我不相信，第一段是正確的。糾正我，如果我錯了，但他們都被推到DOM一次去，因此狀態值是相同的。 – Kayote

是的，兩者都被推送到DOM。但是，如你所說，componentDidMount更新了狀態並將其作爲道具傳遞，此操作需要時間。因此初始狀態只傳遞給子組件。它只有在狀態被更新時發生了重新發生並且更新的道具被傳遞 –

React生命週期事件 - 子組件繼承舊狀態道具

回答

相關問題