如何在 Svelte 中获取组件的 dom 节点?

Question

假设我渲染以下对话框：

let dialog;
<MyDialog bind:this={dialog}/>

我想定位这个对话框(我猜使用afterUpdate生命周期功能(。但是，dialog不是 dom 元素。当我记录它时，它看起来像这样：

MyDialog {$$: {…}, left: 785, $set: ƒ, $capture_state: ƒ, $inject_state: ƒ}
$$: {fragment: {…}, ctx: Array(1), props: {…}, update: ƒ, not_equal: ƒ, …}
$capture_state: () => {…}
$inject_state: $$props => {…}
$set: $$props => {…}
someExportedProp: (...)
__proto__: SvelteComponentDev

如何访问它的 dom 以定位它？

Answer 1

MyDialog不是DOM元素，它是一个Svelte组件。所以，这就是你bind:this它时得到的：一个Svelte组件。

只有在绑定到实际元素时，您才会获得 DOM 元素：

<div bind:this={el} />

如果您需要从其使用者(父(组件访问MyDialog的 DOM，则需要从MyDialog组件代理它。

MyDialog.svelte

<script>
export let el
</script>
<div class="dialog" bind:this={el}>
<slot />
</div>

App.svelte

<script>
import MyDialog from './MyDialog.svelte'
let dialog
$: console.log(dialog) // here, DOM element!
</script>
<MyDialog bind:el={dialog}>
Hello!
</MyDialog>

话虽如此，在组件外部泄漏 DOM 元素之前，我会三思而后行。它有点打破封装，这往往最终会使你的生活复杂化......也许您可以想到一个更好的解决方案来控制您的对话位置，而无需让消费者直接访问组件的内部？

编辑

用道具移动...

Props 是"反应式"的，它们的值由框架自动反映在 DOM 中，所以你不需要运行函数来移动东西。你可以声明你想要的。这是这些声明性框架的首选样式。

<script>
export let top
export let left
$: style = `top: ${top}px; left: ${left}px`
</script>
<div class="dialog" {style}>
<slot />
</div>

如果你也需要，当 props 使用反应式块(命令式(更改时，你仍然可以运行一些代码：

<script>
export let top
export let left
let el
// reactive block will rerun each time el, top, or left changes
$: if (el) {
el.style.top = top + 'px'
el.style.left = left + 'px'
}
</script>
<div class="dialog" bind:this={el}>
<slot />
</div>