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

【问题标题】：Reactivity of dynamic <svelte:component> props动态 <svelte:component> 道具的反应性
【发布时间】：2019-10-07 00:35:38
【问题描述】：

我的问题与previous one (do-dynamic-props-exist-in-svelte-3) 类似。我按照建议使用传播道具，但这似乎不起作用。

上下文：我正在使用 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 构造，但我想知道是否有更优雅的方式。

【问题讨论】：

听起来您发现了一个错误。如果您可以创建一个更简单的重现来说明问题，请raise an issue — 谢谢
开枪！我有吗？妈的，不是我的本意。好吧，我会尝试获得一个 repo，希望我能用 svelte REPL 做到这一点，因为我在这里什么都不想做。
这可能是可能的错误的再现：svelte.dev/repl/c30956f32d514063b7694711a3637093?version=3.12.1
这里最终没有错误，参见。我的答案。感谢@RichHarris 的支持

标签： svelte

【解决方案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})

【讨论】：