javascript - React : this. 函数不是函数

Question

我收到错误 this.updateCSSAnimation 不是函数，但我不确定为什么，因为我已将其绑定(bind)在构造函数中。我尝试过使用或不使用括号的 this.updateCSSAnimation 但都不起作用。

import React from 'react'

class ScrollBG extends React.Component {
  constructor(props) {
    super(props)

    this.updateCSSAnimation = this.updateCSSAnimation.bind(this)
  }

  componentDidMount () {
    document.addEventListener('scroll', this.handleScroll)
  }

  componentWillUnmount () {
    document.removeEventListener('scroll', this.handleScroll)
  }

  handleScroll () {
    this.scroll = window.ScrollY

    this.globe = document.querySelector('.globe')
    this.map = document.querySelector('.map')

    this.updateCSSAnimation()
  }

  updateCSSAnimation () {
    const scroll = this.scroll

    this.globe.style.bottom = 0 + 200 * (scroll / 250) + 'px'
    this.map.style.width = 68 + (scroll / 50) + 'rem'
  }

  render () {

    return (
      <section className='map'>
        <div className='globe'>
         stuff
        </div>
      </section>
    )
  }
}

export default ScrollBG

Answer 1

在您的情况下，handleScroll 中的this - 是对document 的引用。 document 没有 updateCSSAnimation 功能。您需要绑定(bind) handleScroll 函数，而不是 updateCSSAnimation:

constructor(props) {
    super(props)

    this.handleScroll = this.handleScroll.bind(this)
  }