React.js：從獨立組件訪問總體應用程序狀態

Question

我有一個不屬於任何其他組件的組件。 當用戶單擊鏈接時，頁面將跳至該頁面，該鏈接是由react-router實現的。

<Link to={`/weather-stations/${this.props.active_device}`} >view detail
</Link>

而且我找不到將應用程序狀態傳遞給該組件的方法，例如： <ComponentName data={ this.state }/>我不知道在React中推薦使用哪種方法？ 謝謝。

Answer 1

執行此操作的“官方”方式（即Facebook所使用的方式）是通過Flux架構進行的，如此處所述： https : //facebook.github.io/flux/docs/overview.html

本質上，這涉及創建“存儲”，其中保存數據，然后由您的React組件訪問和顯示數據。 在您的示例中，您可能會創建一個WeatherStationDataStore ，並在active_device ID上鍵入-該鏈接另一端的組件可以從URL中獲取ID並分派一個調用WeatherStationDataStore.get(id)的“操作”-如果存在獲取數據所需的任何服務器交互都可以通過商店進行抽象。

可以在以下位置找到Flux的標准“待辦事項列表”示例： https ： //facebook.github.io/flux/docs/todo-list.html ，它是對概念的很好的介紹。

Answer 2

嘗試這個 -

在鏈接組件中-

<Link to={`/weather-stations/${this.props.active_device}`} state={{"foo":"bar"}} >view detail
</Link>

並在鏈接的組件中

var data = this.props.location.state;
//doSomethingWithData(data.foo);