reactjs - 反应：使用引用在 componentDidMount 上的 scrollIntoView

Question

我正在渲染一个包含大量文本的 Dialog 组件，因此该对话框有一个滚动条。文本包含一些链接，当单击链接时，Dialog 的内容会发生变化。问题是，当内容发生变化时，滚动保持在链接高度的相同位置。当显示新内容时，我想滚动到对话框的顶部。

我为 Dialog 内容创建了一个类组件，并实现了使用 refs 和 scrollIntoView 滚动到 Dialog 顶部的 handleTop 函数。当从按钮单击事件 (TestButton) 调用此函数时，内容将滚动到顶部。但是，当从 componentDidMount() 调用此函数时，什么也没有发生。

export default class DialogContent extends React.Component {

constructor(props) {
  ...
  this.myRef=React.createRef();
}

handleTop = () => {
  this.myRef.current.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
    });  
  };

  componentDidMount() {
      this.handleTop(); 
  }

render() {
  return (
    <div>
            <h1 ref={this.myRef}>Title</h1>
            <p>A lot of text</p>
            <Button>TestButton</Button>
    <div>
)
}

我还通过放置 console.log 消息验证了 componentDidMount 函数是否被调用。

任何想法或建议将不胜感激。