在React.js中，我如何设置一个简单的全局事件系统来在组件之间进行通信?

In React.js, how would I set up a simple global event system to communicate between components?

本文关键字：事件系统全局组件通信之间简单 js React 设置何设置一个更新时间：2023-09-26

在玩弄了React一点之后，我想我基本上喜欢它，但是有一些事情我正在努力弄清楚如何去做。其中之一就是没有父子关系的组件之间的基本通信。

我从教程中了解到，大多数通信是通过使用状态和道具的亲子关系完成的，这似乎很简单。但是，当没有亲子关系时，医生建议建立一个全局事件系统，让我自己去弄清楚。我不太确定这是什么意思。

让我们以我正在研究的问题为例。我在页面的导航栏中有一个<SearchBar />组件，我想用它来填充页面上其他地方的<ResultsTab />组件的搜索结果。试图通过一个共同的父母将这些联系起来是不现实的。那么，如何用SearchBar的结果更新ResultsTab呢?我敢肯定，我可以通过jQuery来做到这一点，忘记React，但什么是正确的React方式来做到这一点?

Facebook为此发布了一个名为Flux的模式- https://github.com/facebook/flux。在简单的应用程序中，它可能非常冗长，但它工作得很好。

与所有这些事情一样，社区正在快速移动并进行了大量更改。我建议先习惯一些非常基本的例子，然后阅读https://medium.com/@dan_abramov/the- evolutionofflux -frameworks-6c16ad26bb31，并尝试其他一些例子。

@dan_abramov's https://github.com/gaearon/redux目前似乎很受欢迎。