javascript - 如何让 intro js 与 React 一起工作？

Question

我正在尝试使用 introJs使用 React，但它似乎不起作用。我怎样才能让它发挥作用？能举个例子吗？

Answer 1

您可以像对待添加到您的 React 应用程序中的任何其他 npm 模块一样对待它。

1. 使用 npm 安装:

   npm install intro.js --save

2. 将模块和 css 导入到要使用它们的组件中:

   从“intro.js”导入 introJs；
导入 'intro.js/introjs.css';

3. 组件挂载时调用必要的函数:

   componentDidMount() {
introJs().start();


4. 像通常使用 html 一样向 jsx 添加步骤:

   data-intro='你好第一步!'

发生在我身上的一件奇怪的事情是 intro.js/intro.min.js 中的一些 css 没有按我预期的那样运行。我不得不进入这些文件，调整 .introjs-helperLayer 选择器上的 opacity 和 .introjs 上的 z-index -fixParent 但这对我来说可能只是一个边缘案例。