在 React 中滾動到 DOM 元素

Question

我正在使用 react 16.4，我需要滾動到應用程序中的 DOM 元素。 因為refs現在在 react 中被棄用了，所以我正在尋找最干凈的方法來實現這一點。

但是從我的角度來看，很難找到沒有ref並且沒有像這樣直接操作 DOM 的解決方案：

document.getElementById("questions").lastElementChild.scrollIntoView({
  behavior: "smooth"
});

目前做這樣的事情的最佳方法是什么？

此致

Answer 1

你仍然可以使用React.createRef() 。 只有字符串引用和回調被棄用/正在被棄用。

import React, {Component, createRef} from 'react'
class App extends Component {    
  myRef = createRef()   // Create a ref object     
  scrollToRef = () => 
    window.scrollTo(0, this.myRef.current.offsetTop); 

  render() {
    return <div ref={this.myRef}></div> 
  }
}

Answer 2

React.createRef是在16.3中引入的，所以你可以使用它。 將它放在一個元素上，並在current屬性（即 DOM 節點）上使用scrollIntoView方法。

例子

 class App extends React.Component { bottomRef = React.createRef(); onClick = () => { this.bottomRef.current.scrollIntoView(); }; render() { return ( <div> <button onClick={this.onClick}>Scroll to bottom</button> <div style={{ height: 2000 }} /> <div ref={this.bottomRef}>bottom</div> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 3

嘗試使用組件為垂直滾動設置動畫https://www.npmjs.com/package/react-scroll