React 16.8+，函数式组件

const ScrollDemo = () => {
   const myRef = useRef(null)

   const executeScroll = () => myRef.current.scrollIntoView()    
   // run this function from an event handler or an effect to execute scroll 

   return (
      <> 
         <div ref={myRef}>Element to scroll to</div> 
         <button onClick={executeScroll}> Click to scroll </button> 
      </>
   )
}

单击此处获取有关 StackBlits 的完整演示

React 16.3+，类组件

class ReadyToScroll extends Component {
    constructor(props) {
        super(props)
        this.myRef = React.createRef()  
    }

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

    executeScroll = () => this.myRef.current.scrollIntoView()
    // run this method to execute scrolling. 
}

类组件 - Ref 回调

class ReadyToScroll extends Component {  
    render() {
        return <div ref={ (ref) => this.myRef=ref }>Element to scroll to</div>
    } 

    executeScroll = () => this.myRef.scrollIntoView()
    // run this method to execute scrolling. 
}

不要使用字符串引用。

字符串引用会损害性能，不可组合，并且即将消失（2018 年 8 月）。

字符串引用有一些问题，被认为是遗留的，可能会在未来的版本之一中被删除。[官方 React 文档]

资源 1资源 2

可选：平滑滚动动画

/* css */
html {
    scroll-behavior: smooth;
}

将 ref 传递给孩子

我们希望 ref 附加到一个 dom 元素，而不是一个 react 组件。因此，当将其传递给子组件时，我们无法命名 prop ref。

const MyComponent = () => {
    const myRef = useRef(null)
    return <ChildComp refProp={myRef}></ChildComp>
} 

然后将 ref 属性附加到 dom 元素。

const ChildComp = (props) => {
    return <div ref={props.refProp} />
}

这对我有用

this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })

编辑：我想根据评论对此进行扩展。

const scrollTo = (ref) => {
  if (ref && ref.current /* + other conditions */) {
    ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

<div ref={scrollTo}>Item</div>

只需找到您已经确定的元素的顶部位置https://www.w3schools.com/Jsref/prop_element_offsettop.asp然后通过scrollTo方法https://www.w3schools.com/Jsref/met_win_scrollto.asp滚动到该位置

这样的事情应该工作：

handleScrollToElement(event) {
  const tesNode = ReactDOM.findDOMNode(this.refs.test)
  if (some_logic){
    window.scrollTo(0, tesNode.offsetTop);
  }
}

render() {

  return (
    <div>
      <div ref="test"></div>
    </div>)
}

更新：

因为阵营v16.3的React.createRef()优选

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

handleScrollToElement(event) {
  if (<some_logic>){
    window.scrollTo(0, this.myRef.current.offsetTop);
  }
}

render() {

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

您现在可以使用useReffrom react hook API

https://reactjs.org/docs/hooks-reference.html#useref

宣言

let myRef = useRef()

零件

<div ref={myRef}>My Component</div>

利用

window.scrollTo({ behavior: 'smooth', top: myRef.current.offsetTop })

2019 年 7 月 - 专用钩子/函数

专用的钩子/函数可以隐藏实现细节，并为您的组件提供简单的 API。

React 16.8 + 函数式组件

const useScroll = () => {
  const elRef = useRef(null);
  const executeScroll = () => elRef.current.scrollIntoView();

  return [executeScroll, elRef];
};

在任何功能组件中使用它。

const ScrollDemo = () => {
    const [executeScroll, elRef] = useScroll()
    useEffect(executeScroll, []) // Runs after component mounts
    
    return <div ref={elRef}>Element to scroll to</div> 
}

完整演示

React 16.3 + 类组件

const utilizeScroll = () => {
  const elRef = React.createRef();
  const executeScroll = () => elRef.current.scrollIntoView();

  return { executeScroll, elRef };
};

在任何类组件中使用它。

class ScrollDemo extends Component {
  constructor(props) {
    super(props);
    this.elScroll = utilizeScroll();
  }

  componentDidMount() {
    this.elScroll.executeScroll();
  }

  render(){
    return <div ref={this.elScroll.elRef}>Element to scroll to</div> 
  }
} 

完整演示