仅在 Svelte child 节点全部更新后才操作 DOM
Manipulating the DOM only after Svelte child nodes have all updated
我有一个 Svelte 组件，它在其 child 组件上执行 #each。但是，在更新所有 children 之后，我希望 parent 调整 children 的位置以与它们引用的内容对齐。 （想想：Google 文档中的注释。）当 child 渲染时，child 不可能知道自己的位置，因为我需要处理重叠：如果两个 child 组件指的是相同的内容，我需要将它们垂直展开以便它们可读。这需要由 parent 处理。有没有更好的方法来处理这样的事情？我在想 child 组件可以将它们的 DOM 节点注册到 parent onMount 并且 parent 可以在其 afterUpdate 中定位。想法？
这里 rough vanilla DOM/JavaScript demo 有点说明我正在尝试做的事情。
您可以使用数据绑定，而不是与父级共享 DOM 个节点。
"content" 组件可以与父级共享它的 offsetTop。 "comment group" 组件将共享它的 height.
然后父级将拥有计算每个 "comment group".
的偏移量所需的数据
父项需要决定对齐方式是垂直居中还是垂直顶部（如果前一个 "comment group" 的高度比它引用的内容高，您可能需要垂直顶部对齐）
您是否尝试过使用 tick 生命周期方法，https://svelte.dev/tutorial/tick
我有一个 Svelte 组件，它在其 child 组件上执行 #each。但是，在更新所有 children 之后，我希望 parent 调整 children 的位置以与它们引用的内容对齐。 （想想：Google 文档中的注释。）当 child 渲染时，child 不可能知道自己的位置，因为我需要处理重叠：如果两个 child 组件指的是相同的内容，我需要将它们垂直展开以便它们可读。这需要由 parent 处理。有没有更好的方法来处理这样的事情？我在想 child 组件可以将它们的 DOM 节点注册到 parent onMount 并且 parent 可以在其 afterUpdate 中定位。想法？
这里 rough vanilla DOM/JavaScript demo 有点说明我正在尝试做的事情。
您可以使用数据绑定，而不是与父级共享 DOM 个节点。
"content" 组件可以与父级共享它的 offsetTop。 "comment group" 组件将共享它的 height.
然后父级将拥有计算每个 "comment group".
的偏移量所需的数据父项需要决定对齐方式是垂直居中还是垂直顶部（如果前一个 "comment group" 的高度比它引用的内容高，您可能需要垂直顶部对齐）
您是否尝试过使用 tick 生命周期方法，https://svelte.dev/tutorial/tick