ReactTooltip.show 在功能组件中不起作用

如何解决ReactTooltip.show 在功能组件中不起作用

我想根据某种逻辑显示工具提示，这意味着我将执行 ReactTooltip.show 来手动显示工具提示。

截至目前，文档中的示例提到将目标的引用传递给函数，这在我的情况下不起作用。

这是我创建的代码沙箱的链接，显示了我的代码的示例结构：https://codesandbox.io/s/reacttooltip-sandbox-ovzfe

单击显示工具提示 3 未显示下方 p 标签上的工具提示。

解决方法

首先你需要forwardRef

并且您还需要段落中的属性

  <p
    ref={ref}
    data-tip="tooltip"
    data-for={props.dataFor}
    data-event="click"
  >
    This is Tooltip 3
  </p>

我添加了一个额外的属性 dataFor 以提高可定制性

sandbox

这里是一个带有 useRef 而不是 useState 的 sandbox