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

Question

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

Answer 1

将以下内容添加到您的 index.html

<link href="https://cdn.jsdelivr.net/intro.js/2.3.0/introjs.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/intro.js/2.3.0/intro.min.js"></script>

现在，在 componentDidMount

中调用 introJs().start()

class App extends React.Component{
  componentDidMount(){
    introJs().start()
  }
  render(){
    return <div>
      <a href='http://google.com/' data-intro='Hello step one!'>one</a>
      <a href='http://google.com/' data-intro='Hello step two!'>two</a>
      <a href='http://google.com/' data-intro='Hello step three!'>three</a>
      <a href='http://google.com/' data-intro='Hello step four!'>four</a>
      </div>
  }
}

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

a{
  margin-left: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link href="https://cdn.jsdelivr.net/intro.js/2.3.0/introjs.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/intro.js/2.3.0/intro.min.js"></script>
<div id="app"></div>

希望对您有所帮助！

Answer 2

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

使用 npm 安装：

npm install intro.js --save
将模块和css导入到要使用它们的组件中：

import introJs from 'intro.js'; import 'intro.js/introjs.css';
组件挂载时调用必要的函数：

componentDidMount() { introJs().start(); }
像往常一样向 jsx 添加步骤 html:

data-intro='Hello step one!'

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

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

How can I make intro js work with React?

javascript

intro.js

reactjs