如何在jsfiddle中运行react-tippy库？已导入脚本仍提示Tooltip未定义

我看了你的问题，在JSFiddle里导入react-tippy脚本后还是提示Tooltip未定义，这是因为react-tippy的UMD版本并没有把Tooltip直接暴露为全局变量，而是把它放在了ReactTippy这个全局对象里。

你可以按照下面的方法修改代码：

步骤1：获取Tooltip组件 #

在你的代码开头，先从全局的ReactTippy对象中解构出Tooltip：

const { Tooltip } = ReactTippy;

或者，如果你不想解构，也可以直接在JSX中使用ReactTippy.Tooltip。

步骤2：修正后的完整示例 #

下面是调整后的代码，你可以直接替换到JSFiddle中：

const { Tooltip } = ReactTippy;

function App() {
  return (
    <Tooltip 
      title="Welcome to React" 
      position="bottom" 
      trigger="click"
    >
      <p> Click here to show popup </p>
    </Tooltip>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

为什么会出现这个问题？ #

大多数现代库的UMD包都会把导出内容包裹在一个全局对象里，避免污染全局命名空间。react-tippy就是这样，它把所有组件都挂载到了ReactTippy这个全局对象上，所以直接使用Tooltip会找不到这个变量。

内容的提问来源于stack exchange，提问作者Matt