reactjs - 如何描述类型滚动事件？

Question

我在滚动上添加了监听器，并尝试使用事件。我如何描述 type 而不是 any ？

react 16.8.6Tpescript 3.4

const Component: FC<IProps> = ({ children, scrollOffset, getScrollTop, videoListScrollUpdate }) => {
    const scroller = useRef<HTMLDivElement>(null)

    useEffect(() => {
        if (scrollOffset && scroller.current) {
            scroller.current.scrollTop = scrollOffset
            return
        }
        if (getScrollTop && scroller.current) {
            scroller.current.addEventListener('scroll', (e: any) => getScrollTop(e.target.scrollTop))
        }
    }, [])

}

Answer 1

You can use (e: React.UIEvent<HTMLElement>). Described under the UIEvent from SyntheticEvents.

也就是说，我建议不要在 useRef 中使用 useEffect 。 It's tricky 来确定 useEffect 是否被重新调用并且 scroller.current 不为 null(甚至 console.log 也可能会产生误导)。

但是，我建议改为在将 onScroll 附加到的组件上使用内置的 ref 属性，并给它一个回调来处理滚动。这样，您就不需要在 useEffect Hook 中手动将其附加到您忘记在卸载时删除它的位置(内存泄漏问题)。

<小时/>

interface IProps {
  children: React.ReactNode;
  getScrollTop: (scrollTop: number) => whatever;
  // Your other Props
}

const ScrollComponent: React.FC<IProps> = ({
  children,
  getScrollTop,
  // Your other props
}): JSX.Element => {
  const handleScroll = (e: React.UIEvent<HTMLElement>): void => {
    e.stopPropagation() // Handy if you want to prevent event bubbling to scrollable parent
    console.log({
      event: e,
      target: e.target, // Note 1* scrollTop is undefined on e.target
      currentTarget: e.currentTarget,
      scrollTop: e.currentTarget.scrollTop,
    });

    const { scrollTop } = e.currentTarget;
    getScrollTop(scrollTop);
  };

  return (
  <div
    // I am assuming you were referencing your scroller as follows.
    // ref={scroller}
    onScroll={handleScroll} // Use the onScroll prop instead.
  >
    {children}
  </div>
  );
};

Note *1: scrollTop 在 e.target.scrollTop 上不可用，就像您在 console.log 中看到的那样，但在 e.currentTarget.scrollTop 上不可用，因为 currentTarget 调用事件处理程序所附加的元素。