並行組件的反應通過狀態

Question

我有兩個相同級別的組件（沒有所有者 - 欠者關系）。 假設通過單擊組件A中的“C”，我將溫度單位設置為“C”，然后單擊“F”，我將單位設置為“F”。 在組件B中，我需要顯示溫度，所以我需要得到單位。 但是那個信息在A中。我想知道如何訪問組件A中的狀態？

跟進：

在另一個也與A和B並行的組件C中，我有一個指向另一個頁面的鏈接：

<div className="bottom_link">
     <Link to={'weather-stations/eaB1rJytnpS5mZ2m'}>view detail</Link>
</div>

我還需要將單元信息傳遞給該頁面。 我想知道推薦的方法是什么？ 謝謝。

Answer 1

擁有組件X擁有的所有組件A，B和C，並將狀態移動到那里。 在組件X中有一個傳遞給子setState處理程序，該處理程序將在X上執行setState 。

另一種方法是使用Flux方法。 在這里，您將使用商店並從該共享商店的狀態讀取每個組件。 從F到C和后退的更改將通過動作創建者和商店處理程序完成。

第二種方法是對第一種方法的推斷：您實際上是通過商店將狀態“提升”到全局范圍，而使用X的狀態將其提升到X的范圍。

通常在React中，您希望組件盡可能無狀態。 因此我建議使用第一種方法。 然后，如果需要，您可以將狀態提升到更高的位置（例如，X，Y和Z需要共享狀態），A，B和C保持不變。

使用道具而不是狀態會產生很好的副作用，迫使您考慮組件的API。 這個組件究竟需要做什么數據來完成它的工作？ 然后這些要求作為道具傳遞。

如果我要向在React開始的人提供任何單一建議，那么只要不盡可能不使用狀態。 即使你認為你需要它，你也可以經常刪除它，所以你應該盡可能地努力避免狀態。

我正在開發一個包含數百個組件的應用程序，我幾乎無法想到我們使用this.setState的地方