2

我有 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 and 1 are reverted) ：

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

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

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

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

我也期望sotablelist组件被重新渲染，但是为什么我会从以前的渲染中获得额外的孩子呢？

4

1 回答 1

6

您不能在 lit-html 的控制下对 DOM 进行如此多的变异。lit-html 将注释节点放置到 DOM 中以跟踪动态模板部分的位置，并且通过在您周围移动元素来打破簿记。

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

于 2020-01-14T16:52:55.700 回答