如何滚动到React中动态添加的元素

Question

I have this code that I call in button click to scroll to the bottom of a page:

const el = useRef<HTMLDivElement>(null);

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

This helps me scroll to the element that has the el reference, for example:

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

But, I want to scroll to the last element added or updated, which is not necessarily always at the end of the page. With the approach I am using now, I do not think it is possible. This is because I would need to remove all possible ref={el} attributes from other dom elements, and add it to the dynamic component recently added. I do not know if this is possible.

I wonder if there is a way to achieve this?

Answer 1

This may not be exactly what you want, but you could move the scrollIntoView logic into the child component and run it on mount (via componentDidMount or useEffect). It would look something like this: https://codesandbox.io/s/sad-villani-jhmuw