在 svelte 中获取父节点尺寸

Question

我正在尝试使用 Svelte，这是我的第一次，很抱歉问了这个愚蠢的问题。我阅读了 Svelte 文档，但遇到了一个简单的问题。

基本上，我想获取组件的父尺寸（宽度和高度）。

示例：

<div>
  <MyNode />
</div>

内部 MyNode 我想要父级 div 的尺寸。我该怎么做？

我试过这个：

<script lang="ts">
  import { onMount, tick } from 'svelte'

  let w = 0
  let h = 0
  console.log({ w, h })

  onMount(async () => {
    console.log('on mount')
    console.log({ w, h })
    // await tick()
  })
</script>

<main>
  <div class="flex w-screen h-screen">
    <div class="white w-150 min-w-150 h-full">side menu</div>

    <div
      class="bg-ligthGrey flex-grow h-full border border-orange-500"
      bind:clientWidth={w}
      bind:clientHeight={h}
    >
      content
    </div>
  </div>
</main>

这是我得到的：

这只是第一次打印（当然，它是在onMount里面），如果我调整window的大小，没有任何改变。我需要 w 和 h 始终更新。我该怎么办？

Answer 1

如果您使日志成为反应式 $: console.log({ w, h }) 它将在 w 或 h 更改时执行

为了在组件中包含父级 div 的尺寸，我会将它们作为道具传递 REPL

<script>
    import MyNode from './MyNode.svelte'
    
    let w, h
</script>

<div bind:clientWidth={w} bind:clientHeight={h}>
    <MyNode parentWidth={w} parentHeight={h}/>
</div>

<style>
    div {
        background: lightblue;
    }
</style>

MyNode.svelte

<script>
    export let parentWidth, parentHeight    
</script>

MyNode - parentWidth: {parentWidth} - parentHeight: {parentHeight}

（请注意，parentWidth 和 parentHeight 最初将在组件内 undefined - 根据您打算基于它们执行的操作，这应该被处理）

Answer 2

与其他框架不同，script 标记之间的代码在初始化期间仅执行一次。这解释了为什么您会看到 {w: 0, h: 0 }，因为这些是当时的值。

要再次指示一段代码应该运行，您必须将其明确标记为'reactive'。在您的情况下，这将是：

$: console.log({w, h});

您可以查看教程以了解更多相关信息：https://svelte.dev/tutorial/reactive-assignments

在 svelte 中获取父节点尺寸

Get parent node dimensions in svelte

html

css

svelte

MyNode.svelte