【问题标题】:ReactTooltip.show does not work in Functional ComponentsReactTooltip.show 在功能组件中不起作用
【发布时间】:2021-07-12 19:33:00
【问题描述】:

我想根据一些逻辑显示工具提示,这意味着我将执行 ReactTooltip.show 以手动显示工具提示。

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

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

点击 Show tooltip 3 并没有在下面的 p 标签上显示 tooltip。

【问题讨论】:

  • 沙盒中没有“显示工具提示3”
  • @Apostolos 我可以看到Show tooltip3 按钮...再次检查>
  • 是的,现在可以了。

标签: javascript reactjs react-tooltip


【解决方案1】:

首先你需要forwardRef

你还需要段落中的属性

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

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

sandbox

这里是sandboxuseRef 而不是useState

【讨论】:

  • 哦!我应该想到 ForwardRef!
  • @AbhishekJain 很高兴我能帮上忙。如果它对你有帮助,如果你也支持它,我将不胜感激!
猜你喜欢
  • 2021-10-10
  • 1970-01-01
  • 2022-06-11
  • 2020-08-09
  • 2020-09-11
  • 2021-03-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多