在 Svelte 中传递道具

Question

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

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

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

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 与pattern 匹配/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>

（请注意，props 是字符串化的，因为它们派生自href，因此我们需要==比较而不是===。）

这是一个工作叉子。