如何添加ScrollMagic做出反应？

Question

首先，我尝试使用Xmx zkServer添加scrollmagic，但是当页面重新加载已经有效时，滚动效果会激活任何滚动。 componentDidMount()无效，在控制台中显示addIndicators()。 添加SCROLLMAGIC的问题 我的应用程序使用bulma。

(ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin 'debug.addIndicators'. Please make sure to include plugins/debug.addIndicators.js

componentDidMount() {
      // Get all "navbar-burger" elements
      var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

      if ($navbarBurgers.length > 0) {
        $navbarBurgers.forEach(function ($el) {
          $el.addEventListener('click', function () {
            var target = $el.dataset.target;
            var $target = document.getElementById(target);
            $el.classList.toggle('is-active');
            $target.classList.toggle('is-active');

          });
      });
    }

    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({
      triggerElement: '#navbarAnchor',
    })
    .setClassToggle('#navbarAnchor', 'switch')
    .addIndicators({
        name: 'switch',
        colorTrigger: 'yellow',
        indent: 200,
        colorStart: 'orange',
        colorEnd: 'pink'
    })
    .addTo(controller);
  }

  render() {
    return (
      <nav ref={controller => this.controller = controller} id="navbarAnchor" className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
        <div className="navbar-brand">

        </div>
        <a role="button" className="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>

        <div className="navbar-menu" id="navMenu">
          <div className="navbar-start">
            <a className="navbar-item">Home</a>

            <div className="navbar-item has-dropdown is-hoverable">
              <a className="navbar-link has-background-none" >
                News
              </a>
              <div className="navbar-dropdown is-boxed has-background-black">
                <a className="navbar-item">
                  Front-End
                </a>
                <a className="navbar-item">
                  Back-End
                </a>
                <a className="navbar-item">
                  Digest
                </a>
                <a className="navbar-item">
                  Soccer
                </a>

              </div>
            </div>
          </div>
          <div className="navbar-end">
                <a className="navbar-item">Get Started</a>
          </div>
        </div>

      </nav>
    );
  }
}

componentDidMount，但