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);