react-grid-layout を使用してダッシュボード アプリケーションを構築していますが、理解できない動作が発生します。
問題を紹介するために、次のコードサンドボックスを作成しました。
https://codesandbox.io/s/spring-dream-b4c06?file=/src/App.js
具体的にいつ
- 「小さなボックスを追加」を 2 回クリックすると、予想どおり 2 つのボックスが表示されます。
- ただし、後で「大きなボックスを追加」をクリックすると、大きなボックスが中央に垂直に配置され、その上に小さなボックスが 1 つ、その下に別の小さなボックスが配置されます。
どうすればいいの？
注: 実際のアプリケーションではレイアウトを redux ストアに保持しているため、レイアウトを状態に保つことが要件です。