时间戳

首页 > 解决方案 > 将 Intro.js 与 React Hooks 集成

reactjs - 将 Intro.js 与 React Hooks 集成

问题描述

如何将 intro.js 与反应钩子集成？

唯一记录在案的示例（即使在堆栈溢出时）是针对componentDidMountetc 方法的。

标签： reactjsreact-hooksintro.js

解决方案

您的问题几乎没有上下文，但您肯定可以。

供参考。我不熟悉 introJS 或者它的 API，所以我会编一些东西:)

例如，如果您想要等效于从 componentDidMount 开始，您可以这样做：

useEffect(
  () => {
    // Get intro JS started
    introJs.init();
  },
  [] // Notice the empty array. This will only run when component mounts.
)

然而，如果你有更动态的东西，你需要告诉 intro.js React 执行的 DOM 更新。最简单的例子是在每次更新时重新创建 introJS。

useEffect(
  () => {
    // Get intro JS started
    introJs.init();
    // Destroy intro JS when component changes happen
    return () => introJs.destroy()
  }
  // Notice no dependencies array. This will run on every update.
)

这基本上会在每个组件更新时重新创建 introJS - 这可能是也可能不是您想要/需要的。

您可以使用useEffect可能需要更新 introJS 的特定依赖项，您可以使用refs获取最新的元素并将它们发送到您的 introJS，您可以使用useState来跟踪 introJS 的步数，以便您可以从用户的位置开始它离开等

推荐阅读