仅在 Svelte 子节点全部更新后操作 DOM答案

【问题标题】：Manipulating the DOM only after Svelte child nodes have all updated仅在 Svelte 子节点全部更新后操作 DOM
【发布时间】：2019-12-26 14:21:30
【问题描述】：

我有一个 Svelte 组件，它在其子组件上执行 #each。但是，在所有子项都更新后，我希望父项调整子项的位置以与他们引用的内容对齐。（想想：谷歌文档中的 cmets。）当孩子渲染时，孩子不可能知道自己的位置，因为我需要处理重叠：如果两个子组件引用相同的内容，我需要将它们垂直展开，所以它们是可读的。这需要家长处理。有没有首选的方法来处理这样的事情？我在想子组件可以将它们的 DOM 节点注册到父 onMount 并且父组件可以定位在它的 afterUpdate 中。想法？

这是一个rough vanilla DOM/JavaScript demo，有点说明我正在尝试做的事情。

【问题讨论】：

对于 Discord 上的交叉帖子感到抱歉。从现在开始，我将继续使用 Stackoverflow 来解决设计问题。
这正是afterUpdate（和bind:this）的用途，是的

标签： svelte

【解决方案1】：

您可以使用数据绑定，而不是与父节点共享 DOM 节点。

“内容”组件可以与父级共享它的offsetTop。 “评论组”组件将分享它的height。

然后父级将拥有计算每个“评论组”偏移量所需的数据。

父级需要决定对齐方式应该是垂直居中还是垂直顶部（如果之前的“评论组”的高度大于它所引用的内容，您可能需要对齐到垂直顶部）

【讨论】：

我不认为只有在父母和所有孩子都被调整大小后才能确定孩子的位置。因此，我认为我需要一个可以协调的更高级别的组件。
在我使用 Svelte 的几天后，这个答案现在更有意义了。 “使用数据绑定”应该是我的第一个线索。谢谢你。

【解决方案2】：

您是否尝试过使用刻度生命周期方法，https://svelte.dev/tutorial/tick

【讨论】：

我没看到。感谢您的提醒。它看起来对于在单个组件中批量更新非常有用。但是，除非我遗漏了什么，否则我认为这无助于跨组件的协调。我看错了吗？