当前位置: 首页 > 面试题库 >

什么是react.js友好的方法来对列表进行重新排序?

谷梁云瀚
2023-03-14
问题内容

我有一个带有分数的项目列表,按分数排序,由react.js呈现为垂直方向的矩形项目列表(最高分数在顶部)。将鼠标悬停在单个项目上或其他单击可能会显示/隐藏其他信息,从而更改其垂直高度。

新信息的到来改变了分数,使某些物品在重新排序后排名较高,而另一些排名较低。我希望这些项目同时为它们的新位置 设置动画 ,而不是立即出现在其新位置。

在React.js中是否有推荐的方法可以做到这一点,也许还有一个流行的插件?

(在过去类似的情况下,使用D3时,我使用的技术大致是:

  1. 以自然顺序显示具有项目DOM节点的列表,并具有相对位置。通过相对定位,其他细微更改(由CSS或JS触发)在单个项目的范围内可以按预期转移其他项目。
  2. 只需一步,即可对所有DOM节点进行突变,以将其实际相对坐标作为新的绝对坐标–不会引起视觉变化的DOM变化。
  3. 将项目DOM节点在其父级内重新排序为新的排序顺序–另一个DOM更改不会引起视觉变化。
  4. 根据新排序中所有先前项目的高度,使所有节点的顶部偏移动画化为其新的计算值。这是唯一的视觉激活步骤。
  5. 将所有项目DOM节点突变回非偏移相对位置。再次,这不会引起视觉上的变化,但是以基础列表的自然顺序现在定位的DOM节点将通过适当的移位来处理内部悬停/扩展/等样式更改。

现在我希望以一种类似React的方式实现类似的效果…)


问题答案:

我刚刚发布了一个模块来解决这个问题

https://github.com/joshwcomeau/react-flip-
move

它所做的一些事情与Magic Move / Shuffle有所不同:

  1. 它使用FLIP技术进行硬件加速的60FPS +动画
  2. 它提供了一些选项,可通过逐渐抵消延迟或持续时间来“人性化”洗牌
  3. 它可以优雅地处理中断,没有奇怪的故障影响
  4. 一堆其他简洁的东西,例如开始/结束回调

查看演示:

http://joshwcomeau.github.io/react-flip-
move/examples/#/shuffle



 类似资料:
  • 问题内容: 我有一个列表列表(由于必须动态生成它,所以不能是元组),它的结构为一个int和一个float的列表列表,像这样: 我想对它进行排序,但我只能设法获得内置的排序功能,以便按列表的第一个元素对其进行排序,或者什么也不做,但是我需要按列表的第二个元素对它们进行排序,但是我没有不想实现我自己的排序功能。所以我想要的一个例子是: 有人可以告诉我如何获取内置的排序功能之一来执行此操作吗? 问题答案

  • 问题内容: 假设我们在集合中有一些项目,并且我们想使用某些比较器对它们进行排序,并期望结果在列表中: 一种方法是对列表中的项目进行排序,例如: Anothe方法正在使用排序流: 我想知道哪种方法更有效?排序流是否有任何优势(例如在多核上进行Faste排序)? 在运行时复杂性方面/最快方面是高效的。 我不相信自己要实现一个完美的基准,学习并不能真正启发我。 问题答案: 可以肯定地说,两种形式的排序都

  • 问题内容: 我想具有重新排列表中的行的功能(使用拖放对行进行排序)。 并且行排列的索引在模型中也应更改。 如何 使用Angular Directive 做类似的事情:http : //jsfiddle.net/tzYbU/1162/? 我正在生成表为: 问题答案: 我做的。请参阅下面的代码。 的HTML 指令(JS)

  • 不允许使用任何导入。 输入: 所需输出: 我在找一个简洁的方法。我知道如何用多行for循环来解包它。

  • 问题内容: 我知道使用查询生成器时,可以使用多个列进行排序 但现在我正在处理集合对象。集合具有该方法,但是我无法弄清楚如何使它适用于多列。凭直觉,我最初尝试使用与相同的语法。 但这显然只是按顺序应用排序,并且最终以column2排序,而无视column1。我试过了 但这会引发错误“ asort()期望参数2较长,给定字符串”。使用 不会引发错误,但是排序似乎是随机的,所以我真的不知道它的实际作用。

  • 本文向大家介绍C#对list列表进行随机排序的方法,包括了C#对list列表进行随机排序的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了C#对list列表进行随机排序的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的C#程序设计有所帮助。