如何从苗条的组件获取元素绑定

Question

我需要锚元素的边界客户端矩形。

我标记使用 bind:this={someVariable}

但是当我将该代码添加到 svelte 组件时，我会得到一些其他对象 svelte 用于表示组件。

我可以从该绑定访问封闭的元素或类似的东西吗？或者我是否必须用牺牲品包裹每个组件<div />并绑定它？

Answer 1

Usingbind:this不会为您提供 DOM 元素，因为 Svelte 不要求您的组件具有根元素。这是一个有效的 Svelte 元素：

<script>
 ...
</script>
<div>...</div>
<div>...</div>

一个完全没有任何标记的组件也是如此：

<script>
 ...
</script>

在这两种情况下，都不可能为这些组件返回边界客户端矩形，因为没有“根”元素。

也就是说，您可以做的是bind:this在您的组件中添加一个并导出该组件：

<script>
  export let anchor
</script>

<svelte:options accessors></scelte:options>
<a bind:this={anchor}>...</a>

在您的父级中，您现在可以使用锚点元素child.anchor（请注意，默认情况下无法通过这种方式访问道具，这就是您需要 svelte:options 的原因）

这不是那么简单的一个原因是它是一种非常“不成熟”的工作方式，您通常不会直接与另一个组件（即该组件的域）生成的标记进行交互。

替代方案可能是