Question

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

反应16.8.6 文字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

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

也就是说，我建议不要在useRef中使用useEffect。 It's tricky以确定是否重新调用了useEffect并且scroller.current不为空（甚至console.log也会引起误解）。

但是，我建议在要附加onScroll的组件上使用内置的ref道具，并为其提供回调以处理滚动。这样，您无需将其手动附加到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上却可以看到，因为{ {3}}调用事件处理程序所附加到的元素。

如何描述类型滚动事件？

1 个答案: