如何使用React Scrollbars在垂直滚动期间获取滚动到视图中的React组件的引用或信息？

Question

我有几个React组件垂直堆叠在带有react滚动条的容器中以执行滚动，我想根据当前滚动到视图中的组件对每个组件分别执行一些操作，如何在react和触发事件或任何其他方式执行操作？

 <Scrollbars>
  <Component1/>
  <Component2/>
  <Component3/>
 </Scrollbars>

如上面的代码所示，最初在屏幕加载时，只有Comp1在视口中可见，而当用户向下滚动到Comp2时，必须在Comp2内部执行某些操作，然后重新渲染。 这是预期的行为。

Answer 1

我的解决方案是在容器的滚动条上滚动一个事件（Scrollbars），并在子组件中侦听该事件，现在要让组件在滚动到视图中时执行一些操作，我们可以在绑定到组件内部滚动事件的函数

const ctrRef=this.refs.comp1Ref; //Ref of the component1
const rect=ctrRef.getBoundingClientRect();
const isComponentInView = (
            rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
            rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
        );
if(isComponentInView){
        this.actionToPerform();
}

容器内的其他组件也是如此。

记住要解除对componentWillUnmount生命周期生命周期方法内的事件和函数的绑定。