reactjs - 如何在反应中滚动到模态屏幕中的 Ref

Question

我目前在引导模式中有多个组件。我的目标是能够在用户操作之后对给定组件执行 window.scroll。基本上，这是我尝试过的：

class App extends Component {
  constructor (props) {
    super(props);
    this.myref = React.createRef();   

  }
  
  // function that I have been trying to invoke. 
  scrollToRef = () => {
    window.scrollTo({top: this.myref.current.offsetTop, behavior: "smooth"})
  }

  render () {
     return (
     <Modal>
         <ComponentOne/>
         <ComponentTwo/>
         <ComponentThree ref={this.myref}/>
     </Modal> 
     )

  }

}

我所有的组件都是类组件。我什至尝试将 ComponentThree 包装在一个 div 标签中，如果这有所作为，但没有运气。任何指点将不胜感激，谢谢！

Answer 1

window.scrollTo将与window对象有关，因此将尝试滚动window，而不是<Modal>组件。为此，您可以将另一个ref附加到<Modal>, 这就是您要使用的元素scrollTo。由于<ComponentThree>已经是 的直接子级<Modal>，您可以继续使用该offsetTop属性，但请注意：

offsetTop是距离最近的相对定位的父元素顶部的像素数