react.js中嵌套但独立的组件之间的通信

Question

我想在react.js中开发一个简单的工具提示组件

工具提示的定义如下所示： App.jsx：

<TooltipLink>Hover over me
    <Tooltip>I am the Tooltip content</Tooltip>
</TooltipLink>

我的问题是：TooltipLink和Tooltip相互交流的最佳方式是什么？

它们是嵌套的，但我不能使用道具，因为它们不直接嵌套在组件本身中。另外，我不想使用父（例如App.jsx）来管理TooltipLink和Tooltip之间的通信，因为我希望它们是自包含的。

我考虑过refs，但是当我在Tooltip组件中定义一个ref时，TooltipLink并不知道它（我假设因为refs仅在组件嵌套在组件内部时才起作用。）

我当然可以使用简单的DOM编程来TooltipLink和Tooltip进行通信（例如，当用户将鼠标悬停在TooltipLink上然后找到它的第一个孩子时使用e.target）但我认为必须有更多的反应方式。 ..

Answer 1

您有3个选项：

• 整个层次结构中的级联道具
• 使用redux
• 使用上下文API

我更喜欢使用redux，因为上下文API没有得到官方支持（可能会发生重大更改，例如在反应16.3中）。层叠道具并不是很漂亮，但对于小型应用程序来说可能很方便。 （<MyComponent {...props}>）