对象可能为“空”。 TS2531 定义 useScroll 挂钩时出错

Question

我有以下组件定义：

import { useRef } from 'react';

export default function useScroll() {
    const ref = useRef(null)
    const executeScroll = () => {
        if (ref != null)
            window.scrollTo(0, ref.current.offsetTop)
    }
    const htmlElementAttributes = { ref }

    return [executeScroll, htmlElementAttributes]
}

window.scrollTo(0, ref.current.offsetTop) 行抛出错误。我已经包含if (ref != null) 检查，但没有工作。有什么想法吗？

Answer 1

试试ref.current !== null，因为：

const ref = useRef(null); // ref is object { current: null }
ref !== null;             // always true

import { useRef } from 'react';

export default function useScroll() {
    const ref = useRef(null)
    const executeScroll = () => {
        if (ref.current !== null)
            window.scrollTo(0, ref.current.offsetTop)
    }
    const htmlElementAttributes = { ref }

    return [executeScroll, htmlElementAttributes]
}