React.js：从独立组件访问整体应用程序状态

Question

我有一个不属于任何其他组件的组件。当用户单击使用react-router实现的链接时，页面将跳转到该页面。

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

我无法找到将应用程序的状态传递给该Component的方法，例如：<ComponentName data={ this.state }/>我想知道在React中建议的方法是什么？感谢。

Answer 1

＆＃34;官方＆＃34; （即由Facebook使用）这样做的方式是通过如下所述的Flux架构：https://facebook.github.io/flux/docs/overview.html

基本上，这涉及到＆＃34; Stores＆＃34;它保存数据，然后由React组件访问和显示。在您的示例中，您可以创建一个WeatherStationDataStore，以active_device ID为键 - 该链接另一端的组件可以从URL中获取ID并发送＆＃34;操作＆＃ 34;调用WeatherStationDataStore.get(id) - 如果需要任何服务器交互来获取数据，可以通过商店抽象出来。

标准＆＃34;待办事项列表＆＃34; 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);