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

Question

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

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

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

E.g。如果用户向下滚动页面，然后按下导致渲染的按钮，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()，但没有帮助我。问题是;使用styled-components。因为样式组件为每个渲染提供一个随机类名。所以它重置滚动。我从css中提取了班级名称并解决了我的问题。

Answer 3

想要为那些没有使用锚标记的人添加，preventDefault将无法拯救你。尽管很奇怪，对我而言，它与我的子组件在div中的渲染有关

display:table > display:tablecell

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

Answer 4

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

Answer 5

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