对动态子项进行排序的点亮元素

Question

我有 2 个发光元素组件。父内容是：

<s-sortablelist>
${this.renderChildren()}
</s-sortablelist>

该renderChildren函数正在遍历数组属性children = [1, 2]并创建<div>元素。呈现的页面可能类似于：

<s-sortablelist>
  <div id="1"></div>
  <div id="2"></div>
</s-sortablelist>

sortablelist 组件允许用户<div>使用拖放重新排序标签。在 dnd 之后，渲染的布局可能会变成（2 和 1 被还原）：

<s-sortablelist>
  <div id="2"></div>
  <div id="1"></div>
</s-sortablelist>

用户更改顺序后，如果我更改属性children=[3,4]，结果与我的预期不同：

• 我期待看到孩子们的新名单 3,4
• 我看到一个包含 3,4 和其他一些元素 (1, 2) 的列表，具体取决于我之前所做的 dnd 操作

所以我的问题是它应该如何工作？如果 children 数组发生变化，因为它是一个属性，父组件将呈现。

我也期待sotablelist重新渲染组件，但为什么我会有来自先前渲染的额外子项？

Answer 1

你不能在 lit-html 的控制下改变 DOM 这么多。lit-html 将注释节点放入 DOM 以跟踪动态模板部分的位置，并且通过在您周围移动元素来破坏簿记。

正确的方法是不要在拖放操作中移动节点，而是在您实际更改 DOM 之前，而是更改呈现 DOM 的数据。然后 lit-html 可以在新订单上渲染列表，但保持所有评论节点和其他内部数据同步。