Question

我在 componentDidMount（）中设置了几个变量的值。但是，这些全局变量在我的其他函数中显示为未定义。

componentDidMount() {
    this.authorInfo = document.getElementById("authorInfo");
    this.bottomDistance = this.authorInfo.offsetTop;
    console.log(this.authorInfo);
    document.addEventListener("scroll", this.scrollListener, false);
  }
scrollListener() {
      console.log(this.bottomDistance);
      if (window.pageYOffset >= this.bottomDistance) {
        this.authorInfo.classList.add("sticky")
      } else {
        this.authorInfo.classList.remove("sticky");
      }
    }

render() {
  return(
   .....
   <div id="authorInfo">
              <Heading articleName="About The Author" titleFont="large"/>
              <div className={style.profileInfo}>
                <div style={{marginRight: '30px'}}>
                  <Image src="../../resources/images/profile.jpg" mode="fill" style={{height:'90px', width:'90px',borderRadius: '50%', display: 'inline-block'}} />
                </div>
                <span className={style.infoPanelText}>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.</span>
              </div>
            </div>
  )
}

authorInfo 和 bottomDistance 在我的scrollListeners中显示为未定义。 PS：我也尝试过 ref 属性来分配全局变量的值。

Answer 1

您需要使用.bind()告诉JavaScript要使用的“上下文”：

componentDidMount() {
  this.authorInfo = document.getElementById("authorInfo");
  this.bottomDistance = this.authorInfo.offsetTop;
  console.log(this.authorInfo);
  // Notice .bind here -->                                vvvv
  document.addEventListener("scroll", this.scrollListener.bind(this), false);
}
scrollListener() {
  console.log(this.bottomDistance);
  if (window.pageYOffset >= this.bottomDistance) {
    this.authorInfo.classList.add("sticky")
  } else {
    this.authorInfo.classList.remove("sticky");
  }
}

当您在没有绑定或调用它的情况下传递scrollListener函数时，函数会丢失其上下文，因此未绑定版本中的this引用window。

有关.bind()的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 2

您可以在方法声明中使用箭头函数传递this上下文 scrollListener = () => { /* ... */ }没有在构造函数中手动绑定它。

Answer 3

您的两个变量的声明是在函数内部进行的。您的问题称他们是全球性的，但他们是本地的。

componentsnetDidMount（）中定义的变量不可用

3 个答案: