Javascript 滚动至页面顶部，然后单击React

我有一个组件，它使用名为

#mainView

的静态ID进行渲染。我有一个组件，它在页面下部呈现一个

按钮

元素，我想在单击按钮时向上滚动到

#mainView

元素。据我所知，这是一个非常简单的用户体验，它是web标准的一部分，可以通过普通HTML中的一个简单的

来实现（并通过

滚动行为扩展：平滑
，作为一个实验特性）

我花了最后一个小时试图在React中复制这种行为，但没有成功。URL中的哈希被忽略，盖茨比抱怨外部链接。我试过
@reach/router/navigate
和
Link
。我尝试使用
onClick={…}
，手动尝试覆盖
onClick
无效。所有这些都不会产生任何行为，我能找到的唯一方法包括扩展
React.Component
和进入
render（）
，使用另一种方法，使用refs，以及各种对于如此简单的用户体验来说不必要的东西

有没有办法让React轻松复制我想要的？而且，为什么开发者会主动打破传统的web功能？感谢所有回复。
可能不是很好的方法，但您可以尝试使用
元素。scrollIntoView
，在示例中，我使用的是id和
文档。getElementById
，但您可以将其替换为
ref


const元素=（{id，text}）=>（{text}）；
常量滚动=（{to}）=>document.getElementById（to.scrollIntoView（{behavior:“smooth”}）}>Scroll
常量应用=（）=>
MyApp
ReactDOM.render（，document.getElementById（'app'））

类滚动扩展React.Component{
建造师（道具）{
超级（道具）；
this.myRef1=React.createRef（）；
this.myRef2=React.createRef（）；
this.myRef3=React.createRef（）；
this.myRef4=React.createRef（）；
}
滚动平滑（e，滚动）{
如果（滚动==“秒1”）{
this.myRef1.current.scrollIntoView({
行为：“平滑”，
块：“开始”
});
}否则如果（滚动==“秒2”）{
this.myRef2.current.scrollIntoView({
行为：“平滑”，
块：“开始”
});
}否则如果（滚动==“sec3”）{
this.myRef3.current.scrollIntoView({
行为：“平滑”，
块：“开始”
});
}否则如果（滚动==“sec4”）{
this.myRef4.current.scrollIntoView({
行为：“平滑”，
块：“开始”
});
}
}
render（）{
返回(

this.scrollSmooth（e，“sec1”）}>
第一节

this.scrollSmooth（e，“sec2”）}>
第2节

this.scrollSmooth（e，“sec3”）}>
第三节

this.scrollSmooth（e，“sec4”）}>
第四节


第一节

第二节

第三节

第四节

);
}
}
导出默认滚动条；

您好，请参阅此组件。
工作链接
我使用的是盖茨比，解决方案是导入
盖茨比插件smoothscroll
包并添加到插件（），然后导航：

<button onClick={() => scrollTo('#mainView')}>My link</button>

scrollTo（'#mainView'）}>My链接
我投票结束这个问题，因为我自己找到了解决方案。
<button onClick={() => scrollTo('#mainView')}>My link</button>