javascript - React重新渲染溢出的组件导致页面跳转

代码为 here 供参考。

当按钮被按下时，状态改变，#container1 被#container2 替换。页面保持相同高度，外部容器保持相同高度。但是，在页面向下滚动（需要访问按钮）并按下按钮后，页面会向上滚动到中间的某个位置。鉴于没有更改布局，只有部分文本，我希望页面不会移动。

即使里面的文字溢出，我也需要容器有固定的高度，似乎溢出导致了这个页面跳转错误。

有趣的事实：

如果#container2 只有 1 个 div 元素，则错误似乎不会发生。
该错误仅在第一次将状态从 #container1 更改为 #container2 时发生，但是如果您在查看 #container1 时向上滚动任意数量，则该错误将在下次更改状态时出现。
大小很重要。我可以在编辑器和具有“平板电脑”或“桌面”尺寸的“切换响应式预览”模式中重现该错误。如果我在新选项卡中查看页面，则不会出现错误。
我使用的是 Chrome，但快速测试表明该错误也出现在 Firefox 和 Edge 上。