私の州
次の形式のアイテムの配列があります。
[{ left: 0 }, { left: 10 }, { left: 20 }]
{ left: 30 }この配列に項目を追加できます。
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 30 }]
{ left: 20 }この配列に重複する項目を追加できます。
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 20 }, { left: 30 }]
私の見解
これらのアイテムを平面上の位置 x にレンダリングする必要があります。ここで、x は左のプロパティです。
[{ left: 0 }, { left: 10 }, { left: 20 }]レンダリング|item1 item2 item3|
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 30 }]レンダリング|item1 item2 item3 item4 item5|
重複がある場合は、要素を左または右にシフトして、この重複を解決する必要があります。そう
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 20 }, { left: 30 }]レンダリング|item1 item2 item3 item4 item5|
したがって、それらは重複してはなりません。
新しいアイテムを 1 つずつ追加できます。新しいアイテムは、10 の倍数の left プロパティを持つことができます。
オーバーラップの場合、アイテムは右にシフトしてオーバーラップを解決する必要があります。
これにより、複数のアイテムが右にシフトする可能性があります。
例：
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 20 }, { left: 30 }, { left: 40 }]
これを解決するには、左のプロパティ 30 と 40 で両方の項目をシフトする必要があります。
[{ left: 0 }, { left: 10 }, { left: 20 }, { left: 30 }, { left: 40 }, { left: 50 }]
アイテムの移動は、アニメーション化/トゥイーンする必要があります。React および Flux アーキテクチャでこの要件を適用するにはどうすればよいですか?
A.モデルの左側のプロパティを微調整し、トゥイーンを使用してビューの変更を反映することにより、ストア内の重複を解決します。- React コンポーネントでトゥイーンへの変更を反映するにはどうすればよいですか? - オーバーラップを解決するにはどうすればよいですか?