TypeError: Cannot read property 'scrollIntoView' of null 如何解决？

Posted 2023-02-25

【中文标题】TypeError: Cannot read property \'scrollIntoView\' of null 如何解决？

【英文标题】：TypeError: Cannot read property 'scrollIntoView' of null How to solve?TypeError: Cannot read property 'scrollIntoView' of null 如何解决？

【发布时间】：2021-03-02 03:18:44

【问题描述】：

const ref = useRef(null);

const executeScroll = () => 
        ref.current.scrollIntoView( block: 'end', behavior: 'smooth' )
    

    useEffect(() => 
        executeScroll()
    , [])


<div className="comment" ref=ref>
//Data
</div>

我正在尝试转到特定的 div。我得到了这个错误。知道为什么会显示此错误或如何解决吗？

"TypeError: 无法读取属性 'scrollIntoView' of null"

【参考方案1】：

useEffect 运行时，div 尚未安装到 DOM，因此ref 仍然是null。

useEffect(() => 
  if (ref.current) 
    executeScroll();
  
, [ref.current])

【讨论】：

如果我在子组件中使用 ref=ref 它会起作用吗？

是的，它可以正常工作，将您的useEffect 代码替换为我在上面发布的代码。