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

React.js: Access Overall App State from a Standalone Component

本文关键字：应用 程序状态 访问 组件 js 独立 React      更新时间：2023-09-26

我有一个不属于任何其他组件的组件。当用户点击链接时，页面会跳转到它，这是用react路由器实现的。

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

我找不到将应用程序的状态传递给该组件的方法，比如：<ComponentName data={ this.state }/>我想知道在React中推荐的方法是什么？谢谢

实现这一点的"官方"（即Facebook使用的）方式是通过Flux架构，如下所述：https://facebook.github.io/flux/docs/overview.html

从本质上讲，这涉及到创建"存储"，存储数据，然后由React组件访问和显示。在您的示例中，您可以创建一个WeatherStationDataStore，以active_device ID为键-该链接另一端的组件可以从URL中获取ID，并调度一个调用WeatherStationDataStore.get(id)的"Action"-如果需要任何服务器交互来获取数据，则可以通过存储对其进行抽象。

Flux的标准"待办事项列表"示例可在此处找到：https://facebook.github.io/flux/docs/todo-list.html并且是对这些概念的很好的介绍。

试试这个-

在链接组件-

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

在链接的组件中

var data = this.props.location.state;
//doSomethingWithData(data.foo);
相关文章：