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引用像这样附加到div（位于页面底部）：

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

但是，我收到以下错误：

类型'never'上不存在属性'scrollIntoView'。 TS2339

当我不使用!时，我收到此错误：

对象可能为“ null”。 TS2531

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

Answer 1

对于任何在2020年阅读此书的人

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

并且不再：

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

Answer 2

您必须告诉useRef它将被分配给null以外的其他类型，例如useRef<null | number>(null)。

问题是，通过为ref分配null作为默认值，打字稿只能猜测ref的类型将是其初始值（null）-这就是为什么您遇到上述错误的原因。一般来说，refs don't have to be DOM components，因此useRef的类型定义不假定它将被分配给一个。

TypeScript错误：类型“从不”上没有属性'scrollIntoView'。 TS2339

2 个答案: