TypeScript 错误：属性“scrollIntoView”在类型“never”上不存在。 TS2339

Question

在我的组件中，我有以下代码可以滚动到页面底部：

const el = useRef(null);

useEffect(() => {
    if (el.current === null) { }
    else
        el!.current!.scrollIntoView({ block: 'end', behavior: 'smooth' });

    if (props.loading != true)
        props.fetchFeedbackTaskPageData(submissionId);

}, [])

这个el ref 附加到一个 div（在页面底部），如下所示：

<div id={'el'} ref={el}></div>

但是，我收到以下错误：

“从不”类型上不存在属性“scrollIntoView”。 TS2339

当我没有使用! ，我收到此错误：

对象可能为“空”。 TS2531

我检查了很多关于这个问题的帖子，但没有看到在使用useRef和scrollIntoView时如何在反应中处理这个scrollIntoView 。 有任何想法吗？

Answer 1

您必须告诉 useRef 它将被分配给 null 以外的哪些类型，例如useRef<null | number>(null) useRef<null | number>(null)或在您的情况下useRef<null | HTMLElement>(null) useRef<null | HTMLElement>(null) 。

问题是，通过将 null 作为默认值分配给 ref，typescript 只能猜测 ref 的类型将是它的初始值（null）的类型 - 这就是为什么你会收到你提到的错误。 一般来说， refs 不必是 DOM 组件，因此 useRef 的类型定义不假定它会被分配给一个。

Answer 2

对于在 2020 年阅读本文的任何人来说

const el = useRef<null | HTMLDivElement>(null); 

并且不再：

const el = useRef<null | HTMLElement>(null);