如何從苗條的組件獲取元素綁定

Question

我需要錨元素的邊界客戶端矩形。

我標記使用bind:this={someVariable}

但是當我將該代碼添加到 svelte 組件時，我會得到一些其他對象 svelte 用於表示組件。

我可以從該綁定訪問封閉的元素或類似的東西嗎？ 還是我必須用犧牲的<div />包裝每個組件並綁定它？

Answer 1

使用bind: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 的原因）

這不是那么簡單的一個原因是它是一種非常“不成熟”的工作方式，您通常不會直接與另一個組件（即該組件的域）生成的標記進行交互。

替代方案可能是