Условный рендеринг в Svelte - PullRequest
Новая
       4

Условный рендеринг в Svelte

0 голосов
/ 25 января 2020

Я пытаюсь условно отобразить поле в форме на основе значения в этой форме. Я создал пример здесь:

https://svelte.dev/repl/54917929b89646339a9c7498c13f7b38?version=3.17.3

Суть вопроса в том, что я создаю элемент управления и использую его slot, который содержит некоторые условные логики c.

1 Ответ

1 голос
/ 25 января 2020

Контекст не реагирует в Svelte, то есть изменения в значении не отслеживаются. Вам нужно что-то реактивное, чтобы представление реагировало.

Что вы можете сделать, это поместить store в контекст.

Например, в App.svelte: 

    import { setContext } from 'svelte'
    import { writable } from 'svelte/store'
    let data = writable({});
    setContext("data", data);

Затем, глубже в дочернем компоненте (обратите внимание на префикс $ для чтения / записи значения хранилища в шаблоне): 

  let data = getContext("data");

  const handleInput = event => {

    // NOTE the dollar prefix to access the value
    $data[fieldName] =
      event.target.type === "checkbox"
        ? event.target.checked
        : event.target.value;
  };

REPL с использованием хранилища в context

Другим способом было бы просто использовать двустороннее связывание .

In App.svelte: 

<script>
    // ...
    let data = {};
</script>

<Form submit={submit}>
    <FormField bind:data ... />
    {#if data.type && data.type === 'Local'}
        <FormField bind:data ... />
    {/if}
</Form>

И в вашем FormField.svelte: 

    export let data

REPL с использованием привязки

...