Реактивность динамическаяреквизит - PullRequest
Новая
       6

Реактивность динамическаяреквизит

0 голосов
/ 07 октября 2019

Мой вопрос похож на этот предыдущий (do-dynamic-props-существующие-in-svelte-3) . Я использую опоры в соответствии с рекомендациями, но это, похоже, не работает.

Контекст: я пишу приложение Conduit RealWorld с Svelte и моей библиотекой конечного автомата. У меня есть компонент для каждого маршрута, и у каждого из этих компонентов есть свой набор реквизита. Поэтому я использую следующее:

RealWorld.svelte 

<script>
  import Home from "./Home.svelte"
  import { routes } from "../constants"

  // Props
  // Common props
  export let dispatch;
  export let user;
  export let route;
  // Home route props
  export let tags;
  export let articles;
  export let page;
  export let activeFeed;
  export let selectedTag;
  export let favoriteStatus;

  const { home, signUp } = routes;

  // Component which will be displayed depending on the route
  const componentRoutes= {
    [home]: Home,
    // [signUp]: Signup
  };
  // Props for the component which will be displayed
  const componentRoutesProps={
    [home]: () => ({tags, articles, page, activeFeed, selectedTag, favoriteStatus})
  };

  $: component = componentRoutes[route]
  $: componentProps = componentRoutesProps[route]()
  $: commonProps = {dispatch, user, route}
  $: console.info(`Realworld`, component.name, componentProps, commonProps, {tags, articles, page, activeFeed, selectedTag, favoriteStatus})
</script>

<svelte:component this="{component}" {...componentProps} {...commonProps} />

Однако использование предыдущего кода приводит к потере реактивности, то есть изменяются реквизиты, ноRealWorld компонент не обновляется.

Тот же код с: 

<svelte:component this="{component}" {tags} {articles} {page} {activeFeed} {selectedTag} {favoriteStatus} {dispatch} {user} {route} />

отлично работает.

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

Я всегда могу прибегнуть к более простой конструкции if/then/else, но мне интересно, есть ли более элегантный способ.

1 Ответ

0 голосов
/ 16 октября 2019

Здесь нет ошибки Svelte. Проблема заключалась в том, что я забыл добавить $: перед componentProps, чтобы сделать его реактивным: 

  // Props for the component which will be displayed
+  $: componentRoutesProps={
+    [home]: {tags, articles, page, activeFeed, selectedTag, favoriteStatus}
  };

  $: component = componentRoutes[route]
  $: componentProps = componentRoutesProps[route]
  $: commonProps = {dispatch, user, route}
  $: console.info(`Realworld`, component.name, componentProps, commonProps, {tags, articles, page, activeFeed, selectedTag, favoriteStatus})
...