我的州
我有以下格式的项目数组：
[{ 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|
所以它们不应该重叠。
我可以一个一个地添加新项目，其中新项目可以具有任何 10 的左属性倍数。
如果发生重叠，项目应通过右移来解决重叠问题。
这可能导致多个项目向右移动。
例子：
[{ 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 组件中反映对补间的更改？- 如何解决重叠问题？