(react.js) 重新渲染时不要在屏幕上丢失位置

Question

我正在尝试在 React 中实现无限滚动 - 但向上滚动，而不是向下滚动。

涉及的组件是渲染日志文件，但一次只有一个偏移量。当您第一次登陆页面时，只会获取和显示最后一个偏移量，当您向上滚动时，我会从我的数据库中获取以前的偏移量，将新文本添加到当前文本之前，然后重新呈现。

我 运行 遇到的问题是，当它重新呈现时，我失去了我正在查看的日志当前部分的位置，而是随着新的日志跳得更高日志行。

我能想到的最好的解决方案是在用户将要重新渲染时跟踪用户的位置，然后计算新提取的额外高度is/will，然后就可以了使用 window.scrollTop 移动到正确的位置。

我希望有更简单的东西，有人有什么想法吗？

Answer 1

您可以使用 scrollIntoView。它会将当前选中的元素保持在屏幕顶部。

componentDidUpdate = () => { if ((this.props.index == this.props.selected)) ReactDom.findDOMNode(this).scrollIntoView(); }