将Intro.js与React挂钩集成

Question

如何将intro.js与react挂钩集成？

唯一有文档记录的示例(即使是在堆栈溢出时)是针对componentDidMount etc方法的。

Answer 1

你的问题很少有上下文，但你肯定可以。

仅供参考。我不熟悉introJS或它的应用程序接口，所以我将编造一些东西:)

例如，如果您想要在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的步数，这样您就可以从用户停止的地方重新开始，等等。

Answer 2

您需要在package.json中安装"intro.js“和"introjs-react”。然后你可以在网站上继续使用intro.js-react的指南。