Intro.js反应无法正确呈现第二页

Question

我正在尝试使用intro.js-react npm包为我的react应用程序实现导览。

我的导览包含五个步骤。第一页分为三个步骤，第二页分为两个步骤。

我已经成功实现了第一页的导览，但是当第三步完成后第二页加载到DOM时，工具提示而不是为指定元素呈现总是显示在屏幕的中央。 / p>

如何确保第二页的工具提示正确显示？

这是我的App.js代码：

import React, { Component } from 'react';
import './App.css';
import { render } from 'react-dom';
import { Steps, Hints } from 'intro.js-react';
import 'intro.js/introjs.css';

class App extends Component {

  constructor(props){
    super(props);
    this.state={
      toggle:true,
      stepsEnabled: true,
      initialStep: 0,
      steps: [
        {
          element: '.link1',
          intro: 'This is link One',
          position: 'left',
        },
        {
          element: '.link2',
          intro: 'This is link Two',
          position: 'bottom',
        },
        {
          element: '.link3',
          intro: 'This is link Three',
          position: 'bottom',
        },
        {
          element: '.paragraph-1',
          intro: 'This is Content Paragraph 1 from Second Page',
          position: 'bottom',
        },
        {
          element: '.paragraph-2',
          intro: 'This is Content Paragraph 2 from Second Page',
          position: 'top',
        },
      ]
    }
  }
  render() {
    let renderPage;

    const { stepsEnabled, steps, initialStep } = this.state;

    if(this.state.toggle){
      renderPage=(
        <div className="container">
          <nav>
              <ul>
                <li className="link1">Home</li>
                <li className="link2">Page 1 Link 1</li>
                <li className="link3">Page 1 Link 2</li>
            </ul>
          </nav>
        </div>
      );
    }
    else{
      renderPage=(
        <div>
         <div className="content paragraph-1">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div> 

      <div className="content paragraph-2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div> 
      </div>
      );
    }

    return (
      <div className="App">
      <Steps
          enabled={stepsEnabled}
          steps={steps}
          initialStep={initialStep}
          onExit={this.onExit}
          onBeforeChange={this.onBeforeChange}
        />
        {renderPage}
      </div>
    );
  }

  onExit = () => {
    this.setState(() => ({ stepsEnabled: false }));
  };

  onBeforeChange = (nextStepIndex) => {
    if(nextStepIndex === 3){
      this.setState({
        toggle:false
      });
    }
  };
}

export default App;

以下是显示工具提示行为的图像： Image 1，Image 2，Image 3

我尝试更新this中提到的Step元素，但无法使其正常工作。

那么在呈现第二页的步骤时我犯了一个错误吗？