这个解决方案适用于我在ReactJS

在header.js

function scrollToTestDiv(){
      const divElement = document.getElementById('test');
      divElement.scrollIntoView({ behavior: 'smooth' });
    }

<a class="nav-link" onClick={scrollToTestDiv}> Click here! </a>

在index . html

<div id="test"></div>

以下是我的解决方案:

我在main div里面放了一个隐形的div，使它的位置是绝对的。然后将顶部值设置为-(头高)，并在此div上设置ref。或者你可以用children方法反应该div。

到目前为止，它工作得很好!

<div className="position-relative">
        <div style={{position:"absolute", top:"-80px", opacity:0, pointerEvents:'none'}}  ref={ref}></div>

如果有人在使用Typescript，下面是Ben Carp的答案:

import { RefObject, useRef } from 'react';

export const useScroll = <T extends HTMLElement>(
  options?: boolean | ScrollIntoViewOptions
): [() => void, RefObject<T>] => {
  const elRef = useRef<T>(null);
  const executeScroll = (): void => {
    if (elRef.current) {
      elRef.current.scrollIntoView(options);
    }
  };

  return [executeScroll, elRef];
};

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

只是提醒一下，我无法让这些解决方案在Material UI组件上工作。看起来他们没有当前的属性。

我只是在我的组件中添加了一个空div，并设置了ref prop。

我可能迟到了，但我试图实现动态引用到我的项目的正确方式和所有的答案，我已经找到，直到知道不是安静的满足我的喜欢，所以我想出了一个解决方案，我认为是简单的，并使用本机和推荐的反应方式来创建引用。

有时，您会发现文档的编写方式假设您有一个已知的视图数量，而在大多数情况下，这个数字是未知的，因此您需要一种方法来解决这个问题，在这种情况下，创建动态引用到您需要在类中显示的未知视图数量

所以我能想到的最简单且完美无缺的解决方案是这样做的

class YourClass extends component {

state={
 foo:"bar",
 dynamicViews:[],
 myData:[] //get some data from the web
}

inputRef = React.createRef()

componentDidMount(){
  this.createViews()
}


createViews = ()=>{
const trs=[]
for (let i = 1; i < this.state.myData.lenght; i++) {

let ref =`myrefRow ${i}`

this[ref]= React.createRef()

  const row = (
  <tr ref={this[ref]}>
<td>
  `myRow ${i}`
</td>
</tr>
)
trs.push(row)

}
this.setState({dynamicViews:trs})
}

clickHandler = ()=>{

//const scrollToView = this.inputRef.current.value
//That to select the value of the inputbox bt for demostrate the //example

value=`myrefRow ${30}`

  this[value].current.scrollIntoView({ behavior: "smooth", block: "start" });
}


render(){

return(
<div style={{display:"flex", flexDirection:"column"}}>
<Button onClick={this.clickHandler}> Search</Button>
<input ref={this.inputRef}/>
<table>
<tbody>
{this.state.dynamicViews}
<tbody>
<table>
</div>


)

}

}

export default YourClass

这样，滚动就会转到你要找的任何一行。

干杯，希望它能帮助别人