如何描述类型滚动事件？

Question

我在滚动时添加了监听器，并尝试使用事件。我如何描述类型而不是任何类型？

反应 16.8.6 Tpescript 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

这对我有用 -

//register the scroll event listener callback function
useEffect(() => {
    window.addEventListener('scroll', onScroll)
    return () => {
      window.removeEventListener('scroll', onScroll)
    }
  })

// scroll event callback function
  const onScroll = (e: Event) => {
    const window = e.currentTarget as Window
    //... rest of you function
  }

确保在tsconfig.json中包含dom lib

"compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        ...
      ],

Answer 2

您可以使用 (e: React.UIEvent<HTMLElement>)。在 SyntheticEvents 的 UIEvent 下进行了描述。

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

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

---

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 调用了事件处理程序已附加到。