Question

我正在使用反应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中引入的，因此您可以使用它。将其放在元素上，并在DOM节点的scrollIntoView属性上使用current方法。

示例

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

尝试使用Component动画制作垂直滚动https://www.npmjs.com/package/react-scroll

在React中滚动到DOM元素

3 个答案: