反应16.8+，功能部件

constscrolldemo=（）=&gt；{
常量myRef=useRef（空）
const executeScroll=（）=&gt；myRef.current.scrollIntoView（）
//从事件处理程序或效果运行此函数以执行滚动
返回(
&lt；&gt；
&lt；div ref={myRef}&gt；元素滚动到&lt；/div&gt；
&lt；button onClick={executeScroll}&gt；单击以滚动&lt；/button&gt；
&lt；/&gt；
)
}

单击此处查看StackBlits的完整演示

反应16.3+，级组件

类ReadyToScroll扩展组件{
建造师（道具）{
超级（道具）
this.myRef=React.createRef（）
}
render（）{
返回&lt；div ref={this.myRef}&gt；元素以滚动到&lt；/div&gt；
}  
executeScroll=（）=&gt；this.myRef.current.scrollIntoView（）
//运行此方法以执行滚动。
}

类组件-Ref回调

类ReadyToScroll扩展组件{
render（）{
返回&lt；div ref={（ref）=&gt；this.myRef=ref}&gt；元素以滚动到&lt；/div&gt；
} 
executeScroll=（）=&gt；this.myRef.scrollIntoView（）
//运行此方法以执行滚动。
}

不要使用字符串引用

字符串引用损害性能，不可组合，并且正在退出（2018年8月）

字符串引用有一些问题，被认为是遗留的，并且很可能
将在将来的某个版本中删除。[正式文件]

资源1资源2

可选：平滑滚动动画

/*css*/
html{
滚动行为：平滑；
}

把裁判传给孩子

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

常量MyComponent=（）=&gt；{
常量myRef=useRef（空）
return&lt；ChildComp refProp={myRef}&gt；&lt；/ChildComp&gt；
} 

然后将ref prop附加到dom元素

const ChildComp=（道具）=&gt；{
return&lt；div ref={props.refProp}/&gt；
}