イントロJをReactで動作させるにはどうすればよいですか？

Question

私はReactでintroJsを使用しようとしていますが、動作していないようです。どうすればそれを動作させることができますか？あなたは私に例を挙げることができますか？

Answer 1

componentDidMount

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>

内introJs().start()を呼び出して、今すぐあなたの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> 

に以下を追加しますが、この情報がお役に立てば幸い！