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

每次在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将无法保存你。 尽管很奇怪，对我而言，它与我在div子组件的渲染有关

 display:table > display:tablecell 

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

Answer 3

好的，如果有人读到这个，在我的情况下问题不是上面的任何问题。 您必须以任何方式尝试上面的建议。 我做了一切，包括preventDefault()但没有帮助我。 问题是; 使用styled-components 。 因为样式组件为每个渲染提供一个随机类名。 所以它重置滚动。 我从css给出了类名，解决了我的问题。