React.js 关于从组件监听窗口事件的最佳实践

小能豆

React.js 关于从组件监听窗口事件的最佳实践

javascript

我正在根据几个 React.js 组件在视口中的位置来为其设置动画。如果组件在视口中，则将不透明度设置为 1；如果它不在视口中，则将其不透明度设置为 0。我使用和属性来确定getBoundingClient()组件是否在视口内。top``bottom

组件 A 显示了我对其他组件 B、C 和 D 所遵循的模式。它们各自都在监听window滚动事件。

这是通过每个组件都必须添加事件监听器的“React”方式来实现的吗window？同一窗口上有多个滚动事件监听器？

或者有没有更好的方法，即在所有者组件上将滚动事件侦听器添加到窗口Home？那么所有者子组件是否仍然能够使用知道它们在 DOM 中的位置getBoundingClient()？

Home = React.createClass({
 render: function() {
    <div>
       <ComponentA />
       <ComponentB />
       <ComponentC />
       <ComponentD />
    </div>
  };
});

ComponentA = React.createClass({
  componentDidMount: function() {
   window.addEventListener('scroll', this.handleScroll);
},
  componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
   },

handleScroll: function() {
  var domElement = this.refs.domElement.getDOMNode();
  this.inViewPort(domElement);
},

inViewPort: function(element) {
  var elementBounds = element.getBoundingClientRect();
  (elementBounds.top <= 769 && elementBounds.bottom >= 430) ? TweenMax.to(element, 1.5, { opacity: 1 }) : TweenMax.to(element, 1.5, { opacity: 0 });
},
render: function() {
  return (/* html to render */);
 }

});

阅读 76

2024-06-07

共1个答案

小能豆

  useEffect(() => {
    const onScroll = (event) => console.info("scrolling", event);

    window.addEventListener('scroll', onScroll);

    return () => {
      window.removeEventListener('scroll', onScroll);
    }
  }, []);

2024-06-07