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

Question

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

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

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

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

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

更新:为什么UI滚动到顶部进行一些渲染,而不是其他渲染？

Answer 1

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

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

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

Answer 2

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

display:table > display:tablecell

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

Answer 3

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