React.js：停止渲染滚动到页面顶部答案

【问题标题】：React.js: Stop render from scrolling to top of pageReact.js：停止渲染滚动到页面顶部
【发布时间】：2015-08-02 15:41:20
【问题描述】：

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

JSFiddle：http://jsfiddle.net/bengrunfeld/dcfy5xrd/

任何漂亮的或反应的方法来阻止它？

例如如果用户向下滚动页面，然后按下导致渲染的按钮，UI 将保持与之前相同的滚动位置。

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

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

【问题讨论】：

您能否提供一个 JSBin/JSFiddle 来说明这一点？我的任何 React 应用程序都没有发生这种情况。
当滚动的 dom 节点被卸载并重新安装时，可能会发生这种情况。确保对应元素的key/父树在渲染之间不会发生变化。
@Morhaus 但是，如果您需要相应元素的键/父树在渲染之间进行更改怎么办。例如。用户向表中添加一行，然后您触发渲染添加该行。有什么办法可以阻止“滚动到顶部”的后果？
@Morhaus 所以我仔细检查了，在渲染过程中被改变的元素的键没有改变——只有它们的值。这很奇怪，因为如果您在页面上的一些事物上调用渲染，它不会滚动到顶部。
正如安德斯所说，请在 JSFiddle 中提供您的问题的最小示例。

标签： javascript jquery reactjs

【解决方案1】：

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

https://twitter.com/floydophone/status/608129119025561600

@bengrunfeld @reactjs 你在链接处理程序上忘记了preventDefault()

【讨论】：

即使在e.preventDefault() 之后，它仍在滚动回到顶部
你的处理函数中真的有这个参数吗？ function (e) { e.preventDefault(); ...
对我来说，问题是我使用了<form> 元素，点击封闭的<button> 时它跳到了顶部。由于我并没有真正使用<form>，我只是将其替换为<div>，一切都按预期工作。
只是确认到 2020 年 e.preventDefault() 仍然没有解决这个问题。
我支持这个^^^

【解决方案2】：

想在这里为不使用锚标签的人添加，preventDefault 不会救你。尽管很奇怪，但对我来说，这与使用

在 div 中渲染我的子组件有关

display:table > display:tablecell

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

【讨论】：

【解决方案3】：

好的，如果有人读到这个，就我而言，问题不是上述任何一个。您必须尝试以上任何方式的第一个建议。我做了所有事情，包括preventDefault()，但没有帮助我。问题是；使用styled-components。因为，styled-components 每次渲染都会给一个随机的类名。所以它重置滚动。我从 css 中给出了类名并解决了我的问题。

【讨论】：

只有在你的组件内部创建样式组件时才会发生这种情况。你不应该这样做。在组件之外创建样式组件，并且类永远不会改变。
我遇到了完全相同的问题，并且想知道为什么大声笑，感谢您节省了一些能量
@Alex 谢谢，对钩子有点陌生，我完全明白了。在功能组件中声明了功能组件。因此，在每次重新渲染时重新声明这些内部会导致上述问题。

【解决方案4】：

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

【讨论】：

【解决方案5】：

这可能是由于 redux 状态的变化而发生的，这将显示代码中使用它的任何地方的变化。 尝试在页面滚动时使用该组件的本地状态进行更改。

【讨论】：

如果真的发生这种情况，redux 文档顶部应该有一个闪烁的红色警告。我怀疑你是对的。我正在将应用程序转换为使用 redux，但滚动行为无法正常工作。知道我可以在 redux 代码的哪个位置设置断点来检查是否发生这种情况吗？