在jsfiddle中运行react-tippy

Question

我该如何在jsfiddle中运行react-tippy库？

我导入了脚本，但是出现了错误信息Tooltip未定义。

jsfiddle

提示示例

<Tooltip
  // options
  title="Welcome to React"
  position="bottom"
  trigger="click"
>
  <p>
    Click here to show popup
  </p>
</Tooltip>

- Matt

---

根据你提供的链接，第一个函数是 webpackUniversalModuleDefinition，我只能猜测这个库只能在通过 webpack 转译后才能运行... 但这只是我的猜测。 - deathangel908

Answer 1

有两个问题。您正在加载 reactTippy 的 UMD 模块。因此，该模块未在全局范围内加载 Tooltip。因此，您需要在 JSFiddle 顶部添加以下内容：

const Tooltip = reactTippy.Tooltip;

或者

const {Tooltip} = reactTippy.Tooltip;

接下来，您还需要导入popper.js的UMD模块。

https://unpkg.com/popper.js@1.14.3/dist/umd/popper.js

以下是更新后的JSFiddle链接：

https://jsfiddle.net/uLg4n2gg/7/

- Tarun Lalwani

Answer 2

在使用组件之前，请添加以下内容：

const { Tooltip } = reactTippy; 

更新的JSFiddle

或者，使用<reactTippy.Tooltip>...</reactTippy.Tooltip>。

- Roy Wang

---

谢谢，但是出现了错误“_popper2.default不是一个构造函数”。 - Matt

你能使用不同的环境吗？https://codesandbox.io/s/nyq62yjmm 没有任何错误。 - Roy Wang

Answer 3

你只需要将 Tooltip 更改为 reactTippy 就可以使其正常工作。

已更新的 JSFiddle

- Rinkesh