DOM修改后的React.js / ScrollMagic安装组件

时间:2018-09-02 15:40:07

标签: reactjs

我正在尝试将ScrollMagic与React一起使用,并且被setPin()函数所困,该函数将我的组件包装在div中。当组件在包装之前挂载时,每次更新状态或道具时,React似乎都认为该组件不存在并再次挂载。

我如何设法在包装后的setPin函数之后挂载组件?

  componentDidMount () {
    this.scrollController = new ScrollMagic.Controller()
    this.initScroller()
  }

  initScroller () {
    this.scene = new ScrollMagic.Scene({
      triggerElement: this.node,
      duration: window.innerHeight * 2,
      triggerHook: 0,
      reverse: true
    })
    this.scene.setPin(this.node, { pushFollowers: false })
    this.scrollController.addScene(this.scene)
  }

  render () {
    return (
      <div
        ref={node => {
          this.node = node
        }}
      >
        <div className={this.getClassNames()}>
          <Hemicycle
            deputiesCount={this.props.deputiesCount}
            swissCount={this.props.swissCount}
          />
        </div>
      </div>
    )
  }

0 个答案:

没有答案