在React.js中更新组件onScroll的样式

Mandy番长2020-03-12

我已经在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在滚动回调中调用。但是，这使滚动无法使用，因为这非常慢。

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

番长猴子2020/03/12 10:57:35

使用useEffect的功能组件示例：

注意：您需要通过在useEffect中返回“清理”功能来删除事件侦听器。如果不这样做，则每次组件更新时，您都会有一个附加的窗口滚动侦听器。

import React, { useState, useEffect } from "react"

const ScrollingElement = () => {
  const [scrollY, setScrollY] = useState(0);

  function logit() {
    setScrollY(window.pageYOffset);
  }

  useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll", logit);
    }
    watchScroll();
    // Remove listener (like componentWillUnmount)
    return () => {
      window.removeEventListener("scroll", logit);
    };
  }, []);

  return (
    <div className="App">
      <div className="fixed-center">Scroll position: {scrollY}px</div>
    </div>
  );
}

神奇小小2020/03/12 10:57:35

您可以将函数传递给onScrollReact元素上的事件：https : //facebook.github.io/react/docs/events.html#ui-events

<ScrollableComponent
 onScroll={this.handleScroll}
/>

另一个类似的答案：https : //stackoverflow.com/a/36207913/1255973

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer