javascript - react .js : Stop render from scrolling to top of page

Question

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

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

有什么漂亮的或 react 性方法可以阻止这种情况？

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

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

更新:为什么 UI 在某些渲染中滚动到顶部，而在其他渲染中却没有？

Answer 1

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