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

JavaScript

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

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

第910篇《在React.js中更新组件onScroll的样式》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
番长猴子 2020.03.12

使用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

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

<ScrollableComponent
 onScroll={this.handleScroll}
/>

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android