如何将每个语句中元素的宽度添加到数组中？

Question

所以我有一个组件接受一个字符串数组作为道具并使用每个来渲染它们：

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

我正在尝试通过将它们添加到这样的数组中来获取所有地址宽度：

  $:{
    if(addressWidth) {
      arrayOfWidths = [...arrayOfWidths , addressWidth.offsetWidth];
         }
  }

但是，通过这种方法，我总是得到一个只有一个元素的数组，即每个语句中最后一个地址的宽度。如何将所有宽度添加到数组？

Answer 1

将元素绑定到数组中的索引：

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

How to add the width of elements inside an each statement to an array?