問題タブ [react-grid-layout]

私は自分の状態で次のレイアウトを持っています

この Respondgridlayout コンポーネントに読み込まれます

それは正常に動作しますが、この関数のレイアウトに新しい要素を追加したいときはいつでも

要素をレイアウトの状態にプッシュすると、不適切な位置に最小サイズで追加されます。そして、ブラウザのサイズを手動で変更した後にのみ、適切に配置されます。

追加された要素を最初にレンダリングすると、適切な位置にレンダリングされることに注意してください

react-grid-layout を使用してダッシュボード アプリケーションを構築していますが、理解できない動作が発生します。

問題を紹介するために、次のコードサンドボックスを作成しました。

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

具体的にいつ

• 「小さなボックスを追加」を 2 回クリックすると、予想どおり 2 つのボックスが表示されます。
• ただし、後で「大きなボックスを追加」をクリックすると、大きなボックスが中央に垂直に配置され、その上に小さなボックスが 1 つ、その下に別の小さなボックスが配置されます。

どうすればいいの？

注: 実際のアプリケーションではレイアウトを redux ストアに保持しているため、レイアウトを状態に保つことが要件です。

tl;dr:

React-grid-layoutは、静的オプションが有効または無効 (トグル) の場合に、すべてのグリッド アイテムを誤って移動します。静的な場合はグリッド項目を所定の位置に固定し、ユーザーが静的モードを無効にして移動した場合にのみ移動します。問題の例はこちら (CodeSandbox)で、GIF の例はこちら (Imgur)にあります。

バックグラウンド

react-grid-layoutを使用して、アプリのインタラクティブなグリッド レイアウトを作成しています。グリッド内のすべてのアイテムに対して非静的(ドラッグ可能およびサイズ変更可能) モードと静的(非インタラクティブ) モードを切り替えるボタンがあります( react-grid-layout の静的に関する情報)。私はこの答えuseStateからのヒントを使ってそうしています:

予想される動作:

グリッド内の各要素には、グリッド レイアウト上での位置、サイズなどを定義する固有のプロパティがあります。これらはlayout上記の変数で定義されています。静的モードと非静的モードを切り替える場合、各オブジェクトのキーを除いて、すべての値は同じままにする必要があります。画面上の位置とサイズも同じままにする必要があります。これにより、ユーザーは静的モードをオフに切り替えてグリッド項目の位置/サイズを変更し、オンにすると、それらを残した場所/サイズで「フリーズ」できます。static

現在の (間違った) 動作:

私の問題は、非静的モードのときです。グリッド項目を必要な場所にドラッグし、静的モードをオンにすると、以前の場所にリセットされます。すなわち:

要素 A をスタックの一番下にドラッグし、静的モードをオンにするとスタックの中央に移動し、オフに戻すと要素 A がスタックの一番上に戻ります。要素 A は、静的モードがオンかオフかに応じて、中央と上部の間でループします。

これが私が意味することの例です：

私が試したこと：

• toggleStaticModeスニペット (コメント付きのコード) に示されているように、詳細を提供するために関数を再作成してみました。状態を作成し、isStaticクリックごとに新しい値を設定しました。
• また、クリックで位置が変化するかどうかを確認するために、位置を変更しようとしました。サイズと位置を変更しなければ、値は同じままですが、画面上の位置やサイズが変更されます。
• また、変更staticに注意するために、各オブジェクトの値を true または false のままに変更してみました。オブジェクトaとcのstatic値が true で がbの場合isStatic、静的モードを切り替えるとb、 とaの位置が変更されましたc。コンソールに出力された値は、変更されていないことを示しています。

上記のどれも、何が起こっていたのか、なぜそうなったのかを示していませんでした。ドキュメントもこれに関する多くの情報を提供しませんでした。

機能する可能性のある「ハック」ソリューションの 1 つは、この例のローカル ストレージ/Cookie を使用することですが、ユーザーが静的モードを切り替えるたびにこれを実行したくありません。この解決策は、実際にはこの問題を解決しない可能性があります。

これはバグかもしれませんが、可能であればより良い回避策を見つけたいと思います。

使用される完全なコード:

また、このコードを CodeSandbox にアップロードして、現在の問題の完全な動作例を示しました。この例は、react クラス/ステートを使用する方法と を使用しない方法が異なりuseStateますが、同じ問題が発生します。この例は、静的モードを切り替えたときにサイズ/位置の値が変化することを示しています。

編集：

特別な誰かの答えは正しい方向に私を導きましたが、列が最小サイズよりも小さい値に再配置されると、アイテムは再びトグル時に散らばります。この例は、ここで見ることができます。