使用 intro.js 库

使用

  render() {
    const reducer = this.props.testReducer;
    return (
      <React.Fragment>
        <button data-intro='第一步' data-step='1' data-position="right">click me</button>
        <p data-intro='第3步' data-step='3'>{reducer.n}</p>
        <h2 data-intro='第2步' data-step='2'>{reducer.name}</h2>
      </React.Fragment>
    );
  }

  componentDidMount() {
    window.introJs().setOptions({
        showProgress: true,
        nextLabel: '下一步',
        prevLabel: '上一步',
        skipLabel: '跳过',
        doneLabel: '完成',
        showStepNumbers: false,
        exitOnEsc: false,
        exitOnOverlayClick: false,
      })
      .start()
      .oncomplete(() => {
        l('介绍完成.')
      });
  }

转载于:https://www.cnblogs.com/ajanuw/p/9476530.html