多个交叉钩子来控制多个元素

Question

我正在尝试使用向左和向右滚动按钮实现水平滚动，我在想一种使其具有响应性的方法是知道屏幕上实际可见多少项目，以便当用户单击滚动按钮它实际上滚动到下一组项目。

我的问题是在多个项目中使用了 refs 和 hooks。

我需要一个组中不同元素的不同状态。

我尝试使用 react-intersection-observer，但它又一次意味着只能与一个元素一起使用，并且当被多个 refs 欺骗时，开发变得荒谬。

const refs = React.useRef<Array<InView | null>>([]);

{
  array.map((service, index) => {
    return (
      <InView
        as="div"
        threshold={1}
        onChange={(inView, entry) => {
         //Manually set the inView state of ref
          refs.current[index]?.setState({ inView: inView });
        }}
        ref={(el: any | null) => (refs.current[index] = el)}
        id={`${index}`}
        key={index}
      >
       <div></div>
      </InView>
    );
  });
}

另外，不得不将孔组件包裹在另一个复杂组件中只是为了检查它是否对用户可见看起来太多了。