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

IT技术 javascript jquery reactjs
2021-04-09 20:46:37

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

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

任何漂亮或被动的方式来阻止它？

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

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

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

5个回答

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

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

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

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

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

对我来说，问题是我使用了一个<form>元素，点击所附的<button>它跳到顶部。由于我并没有真正使用<form>，我只是将其替换为 a<div>并且一切都按预期进行。
2021-06-02 20:46:37
即使在e.preventDefault()它滚动回顶部之后
2021-06-10 20:46:37
只是确认在 2020 年 e.preventDefault() 仍然没有做任何事情来解决这个问题。
2021-06-16 20:46:37
你的处理函数中真的有这个参数吗？ function (e) { e.preventDefault(); ...
2021-06-20 20:46:37
我第二个^^^
2021-06-21 20:46:37

想在这里为那些不使用锚标签的人添加，preventDefault不会救你。尽管很奇怪，但对我来说这与将我的子组件渲染在一个divwith

display:table > display:tablecell

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

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

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

如果真的发生这种情况，redux 文档顶部应该有一个闪烁的红色警告。我怀疑你是对的。我正在将应用程序转换为使用 redux，但滚动行为无法正常工作。知道我可以在 redux 代码的哪个位置放置一个断点来检查是否发生了这种情况？
2021-06-18 20:46:37
其它你可能感兴趣的问题
上一篇MUI 中的 CSS 子选择器 下一篇Webpack + React + TypeScript：module未找到......在...... node_modules/react/