动态 <svelte:component> 道具的反应性

Question

我的问题与此类似。我按照推荐使用传播道具，但这似乎不起作用。

上下文：我正在使用 Svelte 和我的状态机库编写 Conduit RealWorld 应用程序。我为每条路线都有一个组件，并且这些组件中的每一个都有自己的一组道具。所以我使用如下：

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} />

但是，使用之前的代码会导致失去反应性，这意味着 props 会发生变化，但 RealWorld 组件不会更新。

与以下相同的代码：

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

工作正常。

我凭直觉认为这可能是由于引用发生了变化，而 Svelte 对传递的引用做出了反应，这些引用后来在解构过程中以某种方式丢失了？那么你如何使用传播道具呢？我如何处理我的用例？

我总是可以求助于更简单的 if/then/else 构造，但我想知道是否有更优雅的方法。

Answer 1

这里没有 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})

动态 <svelte:component> 道具的反应性

Reactivity of dynamic <svelte:component> props

svelte