javascript - 在 Svelte 中向下传递 Prop

Question

我正在尝试使用 Svelte、Svelte Routing 和 Firestore 实现一个相当标准的博客应用程序，但我认为我误解了 props 如何在组件之间传递的基本部分。

我的初始代码基于 Fireship.io 上的优秀教程 - 按照教程工作:https://fireship.io/lessons/svelte-v3-overview-firebase/

我从那里添加了 Svelte Routing - https://github.com/EmilTholin/svelte-routing - 我正在尝试添加一条 View 路线。

App.svelte相关部分:

<Router url="{url}">
    <Navbar user="{user}" />

    <div>
        <Route path="posts/:id" component="{Post}" />
        <Route path="posts/add" component="{PostForm}" />
        <Route path="posts" component="{Blog}" />
        <Route path="/" component="{Home}" />
    </div>

</Router>

在我的博客组件中，我使用了一个名为 PostTeaser 的组件，我在其中传递了一个指向帖子查看页面的链接。

博客组件:

<div class="posts">
    {#each posts as post}
      <PostTeaser post="{post}" />
    {/each}
</div>

PostTeaser 组件:

<div class="post-teaser">
   <h2 class="title is-3"><Link to="posts/{ post.id }" {post}>{ post.title }</Link></h2>
   <div class="post-teaser-content">{ post.content }</div>
</div>

我在浏览器中收到警告: <Link> was created with unknown prop 'post'

尽管带有正确信息的预告片确实出现在屏幕上。

当我点击帖子(即帖子组件)时，我的数据未定义。

我正在放置 export let post;在我的每个组件的脚本标记中。

我应该为我的数据使用“存储”吗？目前，我正在 BlogComponent 中获取我的数据并将其传递给下行。这似乎是不正确的。非常感谢任何帮助。

请参阅此处以获得更完整的示例:https://codesandbox.io/s/romantic-cannon-ri8lo

Answer 1

使用 svelte-routing，你不会从 <Link> 传递 props组件，你从 <Route> 传递它们隐式组件。你在哪里有这个...

<Route path="posts/:id" component="{Post}" />

...你告诉路由器，如果 URL 匹配模式 /posts/:id , 它应该呈现 Post组件，将其传递给 id匹配 URL 的那部分的 prop。

Post组件负责基于此获取其数据。所以在这种情况下，您可以移动 posts数组到一个单独的模块中，并更改 Post.svelte因此:

<script>
  import posts from "./posts.js";

  export let id;
  $: post = posts.find(p => p.id == id);
</script>

<div class="post">
  <h1>{ post.title }</h1>
  <div class="post-content">{ post.content }</div>
</div>

(请注意， Prop 是字符串化的，因为它们是从 href 派生的，所以我们需要一个 == 比较而不是 ===。)

Here's a working fork.