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

Question

After toying with React a bit, I think I mostly like it, but there are a couple of things I'm struggling to figure out how to do. One of those is basic communication between components that are not in a parent-child relationship.

As I understand from the tutorial, most communication is done via a parent-child relationship using states and props, and that seems simple enough. But when there is no parent-child relationship, the docs recommend setting up a global event system and just leave that to me to figure out. Not really sure what is meant by this.

Let's take the problem I'm working on as an example. I have a <SearchBar /> component in the navbar of my page and I would like to use this to populate search results in a <ResultsTab /> component elsewhere on the page. Trying to relate these via a common parent just isn't practical. So how would I update the ResultsTab with the SearchBar's results? I'm sure I could just do it via jQuery and forget about React, but what is the proper React way to do this?

Answer 1

Facebook have released a pattern called Flux for this - https://github.com/facebook/flux . It can be very verbose in simple applications, but it works well.

As with all these things, the community is moving very fast and making a lot of changes. I recommend getting used to very basic examples, then read https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31 and try some of the others.

@dan_abramov's https://github.com/gaearon/redux seems very popular at the moment.