相关疑难解决方法(0)

我在React中构建了一个组件,它应该在窗口滚动上更新自己的样式以创建视差效果.

组件render方法如下所示:

  function() {
    let style = { transform: 'translateY(0px)' };

    window.addEventListener('scroll', (event) => {
      let scrollTop = event.srcElement.body.scrollTop,
          itemTranslate = Math.min(0, scrollTop/3 - 60);

      style.transform = 'translateY(' + itemTranslate + 'px)');
    });

    return (
      <div style={style}></div>
    );
  }

这不起作用,因为React不知道组件已更改,因此组件不会被重新呈现.

我已经尝试将值存储在itemTranslate组件的状态中,并调用setState滚动回调.但是,这使得滚动无法使用,因为这非常慢.

有关如何做到这一点的任何建议？

谢谢.

tl; dr 向下滚动以获取对我有用的解决方案！

如何在反应中在固定导航栏上实现上下滑动？

使用 refs 或使用 componentDidMount 生命周期钩子的更好方法是什么？

  hideNav = (navbar) => {
    const hide = () => {
      let lastScrollTop = 0;
      const currentScrollTop = navbar.scrollTop;

      // scroll down
      if (currentScrollTop > lastScrollTop) {
      navbar.classList.add('hidden');
      } else {
      // scroll up
        navbar.classList.remove('hidden');
      }
      lastScrollTop = currentScrollTop;
    };

    window.addEventListener('scroll', hide);
  };

...在渲染方法中进一步：

 render() {
      return <Navbar ref={this.hideNav} />

更新：

解决方案：

class Navbar extends React.Component {
  state = {
    auth: false,
    slide: 0,  // How much should the Navbar slide …