如何在 react.js 中滚动显示/隐藏组件答案

【问题标题】：How to make a component show/hide on scroll in react.js如何在 react.js 中滚动显示/隐藏组件
【发布时间】：2018-06-29 02:15:55
【问题描述】：

我正在尝试仅在用户向下滚动到页眉时才显示页脚横幅，并在用户向上滚动到顶部时将其隐藏。我如何实现这一点的想法是在页面的顶部组件中为滚动事件添加一个事件侦听器。这是我当前的代码。但它不起作用：

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

handleScroll(e) {
  if(window.pageYOffset > 50 && window.pageYOffset < 900) {
    console.log('scrolled');
    this.setState({
      showBanner: true,
    });
  } else {
    this.setState({
      showBanner: false,
    });
  }
}

顶层组件的渲染方法：

render() {
  return (
    <div ref={elem => this.nv = elem}>
      <Header/>
      <Body
        userInfo={this.props.userInfo}
        history={this.props.history}
      />
      {
        this.state.showBanner && <Banner/>
        || null
      }
    </div>
  )
}

我没有看到任何日志，滚动时显然没有调用setState。

关于如何实现预期目标的任何建议？

* 更新 * 更改 componentDidMount 以在窗口上添加事件侦听器，现在它可以工作了。

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

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

原因是因为您试图将事件侦听器添加到尚不存在的 ref。 componentDidMount 发生在初始渲染之前。这意味着您在 render 中分配的 ref 尚未设置。

您可以使用 ref 回调并在此处附加事件侦听器：

applyRef = ref => {
  this.vn = ref;
  this.vn.addEventListener('scroll', this.handleScroll);
}
render() {
  return (
    <div ref={this.applyRef}>
      <Header/>
      <Body
        userInfo={this.props.userInfo}
        history={this.props.history}
      />
      {
        this.state.showBanner && <Banner/>
        || null
      }
    </div>
  )
}

【讨论】：

试过这个。还是不行。 handleScroll 方法由于某种原因没有被调用。
@NatashaC 好像onScroll 事件不存在。更新了答案以显示如何使用参考来做到这一点。
需要注意的是，我认为每次渲染都会调用applyRef。所以你应该添加一些检查来确保你只附加一次事件。
为了我的目的，将事件附加到 componentDidMount 中的window 就足够了。我已经更新了帖子。