Question

我试图使用React的introJs但似乎没有工作。我怎样才能使它工作？能给我举个例子？

Answer 1

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

使用npm安装：

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

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

componentDidMount() { introJs().start(); }
像通常使用html一样向jsx添加步骤：

data-intro='Hello step one!'

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

Answer 2

将以下内容添加到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>

现在，在introJs().start()

中拨打componentDidMount

＆＃13;

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'))

＆＃13;

a{
  margin-left: 60px;
}

＆＃13;

<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>

＆＃13;

希望这有帮助！

如何让介绍js与React一起使用？

2 个答案: