Svelte bind: offsetWidth с контекстом - PullRequest
Новая
       12

Svelte bind: offsetWidth с контекстом

0 голосов
/ 29 марта 2020

Вот как я создаю контекст svelte: 

<script>
import {setContext} from 'svelte'
let layoutWidth


setContext('layout', {layoutWidth})

</script>
<div bind:offsetWidth={layoutWidth}><slot/></div>

Если я попытаюсь getContext в дочернем компоненте, я получу undefined, но в родительском компоненте layoutWidth всегда имеет значение.

Как получить offsetHeight родительского элемента в svelte?

Я использую getContext вот так: 

<script>
import {getContext} from 'svelte'
const {layoutWidth} = getContext('layout')
$: console.log(layoutWidth) //undefined
</script>

1 Ответ

2 голосов
/ 29 марта 2020

Контекст Svelte не реактивен. Значение устанавливается один раз, когда вызывается setContext (что можно сделать только во время инициализации компонента), и оно не отслеживается для последующих изменений.

Если вам нужно передать реактивное значение (то есть, это будет изменить), тогда вам нужно передать хранилище через контекст.

Пример провайдера: 

<script>
  import { setContext } from 'svelte'
  import { writable } from 'svelte/store'

  const layoutWidth = writable(null)

  setContext('layoutWidth', layoutWidth)
</script>

<div bind:offsetWidth={$layoutWidth}><slot/></div>

И потребитель: 

<script>
  import { getContext } from 'svelte'

  const layoutWidth = getContext('layoutWidth')

  // subscribe to the store to get the value
  // do this in a reactive expression to keep _layoutWidth in sync
  $: _layoutWidth = $layoutWidth

  // you can also write back to the store (if it's writable)
  $layoutWidth = 400
</script>

...

Примечание: я сомневаюсь bind:offsetWidth сделает то, что вы хотите. Здесь снова значение будет прочитано только один раз. Значение не будет обновляться при изменении размера div (потому что нет собственного API для наблюдения за размером элементов ...). Возможно, вы захотите добавить resize прослушиватель событий к window или что-то в этом роде (также существуют некоторые библиотеки, которые позволяют наблюдать за размером элементов с некоторыми хитростями).

...