Question

我收到错误this.updateCSSAnimation不是一个函数，但是我不确定为什么在我的构造函数中绑定了它。我已经尝试过使用带括号和不带括号的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

在您的情况下，this中的handleScroll是对document的引用。 document没有updateCSSAnimation功能。您需要绑定updateCSSAnimation函数来代替handleScroll：

constructor(props) {
    super(props)

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

Answer 2

您正在从this.updateCSSAnimation()致电handleScroll，这就是您面临问题的原因。

只需将this.handleScroll = this.handleScroll.bind(this)绑定在constructor内

希望这会有所帮助，编写愉快的代码！

Answer 3

是因为

 document.addEventListener('scroll', this.handleScroll)

和

document.removeEventListener('scroll', this.handleScroll)

您的handleScroll函数是在不同的上下文中调用的，因此在该函数中使用this并不表示ScrollBG。

如果将this绑定到handleScroll，它应该可以正常工作。

即

document.addEventListener('scroll', this.handleScroll.bind(this))

根据您的环境，您还可以通过执行以下操作来利用箭头功能：

handleScroll = () => {
  this.scroll = window.ScrollY

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

  this.updateCSSAnimation()
}

箭头功能会自动将此功能绑定到一个功能，但是为了以上述方式在类中利用它们，您需要在构建环境中启用class properties。 Here's是JS中上下文的一个简单示例，其中的类具有箭头功能和常规方法。

参考：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://blog.pragmatists.com/the-many-faces-of-this-in-javascript-5f8be40df52e

Answer 4

您假设同时绑定了updateCSSAnimation和handleScroll，但这就是为什么使用箭头功能更好的做法

反应：this.function不是函数

4 个答案: