Javascript React.js：停止将渲染滚动到页面顶部

每次在React.js中执行渲染时，UI都会滚动到页面顶部

JSFiddle：

有什么巧妙或反应性的方法来阻止这一切吗

例如，如果用户向下滚动页面，然后按下导致呈现的按钮，则UI将保持与以前相同的滚动位置

// Forces a render which scrolls to top of page
this.setState({data: data});

---

更新：为什么某些渲染的UI会滚动到顶部，而其他渲染的UI不会滚动到顶部？

@floydophone在Twitter上回答了这个问题

@bengrunfeld@reactjs您忘记了链接处理程序上的

preventDefault（）

---

想要在这里为那些不使用锚定标记的人添加，

preventDefault

将不会保存您。尽管这很奇怪，但对我来说，它与使用

display:table > display:tablecell

---

由于某些原因，在这种情况下，当进行任何重新渲染时，子组件的滚动位置将丢失。当我切换到flexbox（display:flex）时，问题消失了。

好的，如果有人读到这篇文章，在我的例子中，问题不是上面的任何一个。你必须尝试以上任何方式的第一个建议。我做了所有事情，包括

preventDefault（）

，但没有帮助我。问题是,；使用

样式化组件

。因为，样式化组件在每次渲染时都会给出一个随机的类名。所以它会重置滚动。我从css中给出了类名并解决了我的问题。

如果渲染触发器滚动到顶部，通常意味着某个UI组件由于状态而改变其维度，这可以通过添加最小宽度/高度来解决。

这可能是因为redux状态的改变，这将显示代码中使用它的地方的所有更改尝试使用该组件的本地状态进行更改，该组件的操作会滚动页面。

您能否提供一个JSBin/JSFiddle来说明这一点？这在我的任何React应用程序中都没有发生过。当卸载并重新装载滚动的dom节点时，可能会发生这种情况。确保相应元素的

键

/父树在渲染之间不会更改。@Morhaus但如果需要相应元素的键/父树在渲染之间更改，该怎么办。例如，用户向表中添加一行，然后通过添加该行触发渲染。有没有办法停止“滚动到顶部”的结果？@Morhaus所以我仔细检查了一下，渲染过程中被更改的元素的键没有改变——只有它们的值。这很奇怪，因为如果您在页面上的某些内容上调用呈现，它将不会滚动到顶部。正如Anders所说，请在JSFIDLE中提供一个关于您的问题的最小示例。即使在

e.preventDefault（）

它滚动回顶部之后，您的处理程序函数中是否确实有该参数<代码>函数（e）{e.preventDefault（）；…对我来说，问题是我使用了

元素，点击所附的

它跳到了顶部。因为我没有真正使用

，我只是用

替换它，一切都按预期进行了。只是确认在2020年，e.preventDefault（）仍然没有做任何事情来解决这个问题。我支持这个^^^^^只有在组件内部创建样式化组件时才应该发生。这是不应该的。在组件外部创建样式化组件，类永远不会更改。我有完全相同的问题，并且想知道为什么LOL，谢谢您保存了一些energy@Alex谢谢对于钩子来说有点陌生，我完全理解了。在一个功能组件中声明了一些功能组件。因此，在每个重新渲染器中重新声明这些功能组件会导致上述问题。