reactjs - react-grid-layout 中奇怪的压缩行为

Question

我正在使用 react-grid-layout 构建仪表板应用程序，并且遇到了一些我不理解的行为。

我创建了以下代码框来展示问题：

https://codesandbox.io/s/spring-dream-b4c06?file=/src/App.js

具体什么时候

• 单击“添加小框”两次，我得到了两个框，这是我所期望的。
• 但是，之后单击“添加大框”时，大框垂直放置在中间，上面有一个小框，下面有一个小框。

怎么会这样？

注意：我需要保持布局状态，因为我将它保存在我真实应用程序的 redux 存储中。

标签： reactjsreact-grid-layout

Answer 1

解决方案是使用 onLayoutChange 而不是 onDragStop 和 onResizeStop。