Lit-element 正在对动态子项进行排序

Question

我有 2 个 lit-element 组件。 parent 内容是：

<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]，结果与我的预期不同：

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

我也期待 sotablelist 组件被重新渲染，但为什么我会从以前的渲染中获得额外的 children？

Answer 1

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

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

Lit-element that is sorting dynamic childs