如何在react

Question

我有此代码，可以在单击按钮时滚动到页面底部：

const el = useRef<HTMLDivElement>(null);

const ScrollToBottom = () => {
    if (el.current !== null)
        el!.current!.scrollIntoView({ block: 'end', behavior: 'smooth' });
}

这可以帮助我滚动到具有el引用的元素，例如：

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

但是，我想滚动到添加或更新的最后一个元素，它不一定总是在页面末尾。用我现在使用的方法，我认为不可能。这是因为我需要从其他dom元素中删除所有可能的ref={el}属性，并将其添加到最近添加的动态组件中。我不知道这是否可能。

我想知道是否有办法实现这一目标？

Answer 1

这可能不完全是您想要的，但是您可以将scrollIntoView逻辑移到子组件中并在安装时运行（通过componentDidMount或useEffect）。看起来像这样：https://codesandbox.io/s/sad-villani-jhmuw