如何从一个组件滚动到另一个组件的元素？

Question

I have 2 components, Component A and Component B which are rendered in the same page. What I need is to scroll to a div of the Component B once I click on a button in the Component A.

Component B:

import React, { FC, useRef } from 'react';

const Footer: FC<Props> = ({ children }) => {
const commentSection = useRef(null);
const gotoCommentSection = () => window.scrollTo({top: commentSection.current.offsetTop, behavior: "smooth"})

  return (
    <>
      <div className="footerClass" ref={commentSection}>
        <div className="container">{children}</div>
      </div>
    </>
  );
};

export default Footer;

if I insert this button in Component B, the scrolling function is working. But how can I achieve that from the Component A?

 <button type="button" onClick={gotoCommentSection}>Scroll to Area</button>

Answer 1

I think it will work to move useRef up the component tree to Component A along with your scroll function. Then use React.forwardRef to apply that ref to the element in Component B. Looks like this is a decent example: https://stackoverflow.com/a/49832065/9325243