在Svelte的each循环语句中如何将内部元素宽度存入数组

问题原因 #

你使用单个变量addressWidth存储DOM元素引用，each循环的每一轮迭代都会覆盖这个变量的值，最终它只会指向循环渲染的最后一个元素，所以你只能拿到最后一个地址的宽度。

解决方法 #

步骤1：改用数组存储所有DOM引用 #

修改模板的bind:this逻辑，把每个元素的引用绑定到数组对应下标的位置：

{#each recipients as email, index}
    <span bind:this={addressWidths[index]}>
      <Address
      {email}
      />
    </span>
{/each}

步骤2：声明对应变量 #

在组件script块中声明引用数组和宽度存储数组：

let addressWidths = [];
let arrayOfWidths = [];

步骤3：批量计算所有元素宽度 #

修改响应式逻辑，等所有元素渲染完成后统一遍历计算宽度：

$: if (addressWidths.length === recipients.length) {
  // 每次计算前清空旧数据，避免重复累加
  arrayOfWidths = addressWidths.map(el => el?.offsetWidth || 0);
}

可选优化（适用于recipients动态变化的场景） #

如果你的收件人数组会动态更新，可以加一层监听提前清空引用数组，避免旧引用残留：

$: recipients, () => {
  addressWidths = [];
}

内容的提问来源于stack exchange，提问作者João Pedro