对于读到这篇文章的人来说，如果他们没有那么幸运地使用上述解决方案，或者只是想要一个简单的即时解决方案，那么这个软件包对我来说很有用:https://www.npmjs.com/package/react-anchor-link-smooth-scroll。黑客快乐!

使用findDOMNode最终将被弃用。

首选的方法是使用回调引用。

Github Eslint

你可以这样尝试:

 handleScrollToElement = e => {
    const elementTop = this.gate.offsetTop;
    window.scrollTo(0, elementTop);
 };

 render(){
  return(
      <h2 ref={elem => (this.gate = elem)}>Payment gate</h2>
 )}

你可以使用useRef和scrollIntoView。

使用useReffor你想滚动到的元素:这里我想滚动到PieceTabs元素，这就是为什么我用一个盒子(div)包装它，这样我就可以访问dom元素

您可能对refs很熟悉，它主要是作为一种访问DOM的方式。如果你传递一个ref对象给React, React会在相应的DOM节点发生变化时将其.current属性设置为相应的DOM节点。看医生

...
const tabsRef = useRef()
...
<Box ref={tabsRef}>
   <PieceTabs piece={piece} value={value} handleChange={handleChange} />
</Box>
...

创建一个处理滚动的函数:

  const handleSeeCompleteList = () => {
    const tabs = tabsRef.current
    if (tabs) {
      tabs.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      })
    }
  }

当你点击滚动到目标时，在你想要的元素上调用这个函数:

 <Typography
  variant="body2"
  sx={{
    color: "#007BFF",
    cursor: "pointer",
    fontWeight: 500,
  }}
  onClick={(e) => {
    handleChange(e, 2);
    handleSeeCompleteList(); // here we go
  }}
>
  Voir toute la liste
</Typography>;

好了

这对我很有效

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>

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. 
}

类组件-引用回调

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文档]

resource1resource2

可选:平滑滚动动画

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

传递ref给一个子对象

我们希望ref附加到一个dom元素，而不是一个react组件。所以当把它传递给子组件时，我们不能给prop ref命名。

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

然后将ref prop附加到dom元素上。

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