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

【问题标题】：TypeScript error: Property 'scrollIntoView' does not exist on type 'never'. TS2339TypeScript 错误：“从不”类型上不存在属性“scrollIntoView”。 TS2339
【发布时间】：2019-07-14 14:55:35
【问题描述】：

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

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 引用附加到一个div（在页面底部），如下所示：

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

但是，我收到以下错误：

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

当我没有使用! 时，我收到了这个错误：

对象可能是“空”。 TS2531

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

【问题讨论】：

你是如何使用 ref 的？
@ravibagul91 el ref 附加到一个 div（在页面底部）：<div id={'el'} ref={el}></div>

标签： javascript reactjs typescript

【解决方案1】：

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

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

不再是：

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

【讨论】：

【解决方案2】：

你必须告诉 useRef 它将被分配到哪些类型而不是 null ，例如useRef<null | number>(null) 或在您的情况下为 useRef<null | HTMLElement>(null)。

问题是，通过将 null 作为默认值分配给 ref，打字稿只能猜测 ref 的类型将是它的初始值（null） - 这就是为什么你会得到你提到的错误.一般来说，refs don't have to be DOM components，所以useRef的类型定义并不假设它会被赋值给一个。

【讨论】：

感谢您的回复！但是，这是我面临的问题。在所有教程中，都使用了ref(null)。我不知道如何定义它。
哦，抱歉 - 我想我的评论被重新格式化了，让我快速修复一下
我应该输入 HtmlElement 而不是 number。再次感谢您在假期的帮助.. :)
对于任何关注此的人，它是HTMLElement。