如何将元素宽度作为道具传递？

Question

我正在尝试将 table 单元格的宽度作为道具传递给其中的组件：

 <td bind:clientWidth={cellWidth}>
        <NestedComponent cellWidth={cellWidth} />
  </td>

然后在嵌套组件中，我尝试通过 lyfecycle 方法访问它，但它记录为未定义

<script lang="ts">
import { afterUpdate, onMount } from "svelte";
  export let cellWidth;
  
  let listWidth;
  
  onMount(()=> {
    console.log('cellWidth', cellWidth);
  })

  afterUpdate(() => {
    console.log('cellWidth', cellWidth);
  }) 

</script>

但是，如果我在组件内部渲染宽度，它会显示宽度

<div>{cellWidth}</div>

如何在生命周期方法中访问该数字？

Answer 1

出于某种原因，它仅在之后可用（如果您在最初的 2 个未定义后开始调整大小，它应该会显示）

另一种似乎可以立即获得正确值的方法是使用反应式语句：

$: console.log(cellWidth)

Answer 2

这是一个棘手的案例。 onMount和初始afterUpdate的执行顺序是children在他们的parent之前执行。这是有道理的，因为从概念上讲，每个 child 都需要在 parent 完成其装载之前被装载。

在您的情况下，cellWidth 的值仅在 parent 组件安装后才知道，因为宽度的计算需要节点出现在 DOM 中。这意味着您不能为此使用 onMount 或初始的 afterUpdate，并且当从 [=31= 设置 cellWidth 时，Svelte 似乎不会触发另一个 afterUpdate ]开头。

所以解决方案取决于您想要实现的目标。一种可能性是提供一个函数，如果变量尚未初始化，则在短暂超时后再次 executes/tries ，或者您使用反应式语句，该语句将在每次更改该变量后执行（可能是更好的选择）。

<script>
  import { afterUpdate } from "svelte";

  export let cellWidth;

  // Option 1
  function logCellWidth() {
    if (cellWidth === undefined) {
      setTimeout(() => logCellWidth(), 100);
    } else {
      console.log('cellWidth1', cellWidth);
    }
  }

  afterUpdate(logCellWidth);

  // Option 2
  $: cellWidth !== undefined && console.log('cellWidth2', cellWidth);

</script>

如何将元素宽度作为道具传递？

How to pass an element width as a prop?

javascript

svelte