并行组件的反应通过状态

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的地方