javascript - 正在对动态子项进行排序的 Lit 元素

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 岁 child 的新列表
• 我看到一个包含 3,4 和一些其他元素 (1, 2) 的列表，具体取决于我之前进行的 dnd 操作

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

我还期待 sotablelist要重新渲染的组件，但为什么我会从之前的渲染中获得额外的子组件？

Answer 1

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

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