reactjs - React useRef 滚动仅在 setTimeout 内工作

Question

我正在尝试在反应应用程序上使用 scrollIntoView ，因此在页面中我正在使用它

useEffect(() => {
  myRef.current.scrollIntoView({ behavior: 'smooth' });
}, [myRef, selectedSectionIndex, modalOpen]);

它几乎适用于所有情况，因为我有ref={myRef}关联到我想要查看的元素。但是，在其中一个转换中，即使调用了代码，它也不做任何事情（甚至不会引发错误）。只有当我将其更改为

useEffect(() => {
  setTimeout(() => myRef.current.scrollIntoView({ behavior: 'smooth' }), 0);
}, [myRef, selectedSectionIndex, modalOpen]);

我已经阅读过类似的问题，这就是我实际尝试此解决方案的原因。但不能真正说明这是如何解决它的。我一直在阅读第一个代码运行时引用的 dom 元素可能尚未呈现，但是

一个。为什么会出现在第二个？湾。在该行上方放置一个调试器，我可以看到该元素存在于 DOM 中，如果我释放调试器，则可以看到更多元素，同样并且静默地什么也不做，但如果我跨过并运行该行，它实际上会滚动。编辑：我附上截图调试器的，如果我什么都不按 f8，如果我按 f10 它会滚动

我想稀释有一种更清洁的方法来完成这项工作，但找不到

谢谢

标签： reactjsreact-hooks