在斯维尔特传递道具 [英] Passing props down in Svelte
问题描述
我正在尝试使用Svelte，Svelte Routing和Firestore实现一个相当标准的博客应用程序，但是我认为我误解了如何在组件之间传递props的基本部分.
I'm trying to implement a fairly standard blog app using Svelte, Svelte Routing and Firestore, but I think I'm misunderstanding a fundamental part of how props are passed between components.
我的初始代码基于Fireship.io上的出色教程-按照该教程进行操作: https://fireship.io/lessons/svelte-v3-overview-firebase/
I based my initial code on the excellent tutorial on Fireship.io - which worked as per the tutorial: https://fireship.io/lessons/svelte-v3-overview-firebase/
从那里我添加了Svelte路由- https://github.com/EmilTholin/svelte-路由-我正在尝试添加视图路由.
From there I've added Svelte Routing - https://github.com/EmilTholin/svelte-routing - and I'm attempting to add a view route.
App.svelte的相关部分:
Relevant part of 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>
在我的Blog组件中，我使用了一个名为PostTeaser的组件，在其中我传递了一个链接到帖子查看页面.
In my Blog Component I use a component called PostTeaser, in which I pass a link to the post view page.
博客组件:
<div class="posts">
{#each posts as post}
<PostTeaser post="{post}" />
{/each}
</div>
PostTeaser组件:
PostTeaser component:
<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>是使用未知道具"post"创建的
Here I get a warning in the browser:
<Link> was created with unknown prop 'post'
尽管预告片的确显示了正确的信息.
Although the teaser does appear on the screen with the correct information.
当我单击该帖子(即帖子组件)时，我的数据是不确定的.
When I click through to the post, i.e. the Post Component, my data is undefined.
我将 export let post; 放置在每个组件的脚本标签中.
I am placing export let post; in the script tag of each of my components.
我应该使用存储"存储数据吗?目前，我在BlogComponent中获取数据并将其传递给行.看来这是不正确的.任何帮助表示感谢.
Should I be using a "store" for my data? At the moment I'm fetching my data in the BlogComponent and passing it down the line. It would seem that this is incorrect. Any help gratefully appreciated.
有关完整示例，请参见此处: https://codesandbox.io/s/romantic-cannon-ri8lo
See here for fuller example: https://codesandbox.io/s/romantic-cannon-ri8lo
推荐答案
使用sroute-routing，您无需传递< Link> 组件中的道具，而是通过中传递道具>< Route> 组件.哪里有这个...
With svelte-routing, you don't pass props from the <Link> component, you pass them from the <Route> component implicitly. Where you have this...
<Route path="posts/:id" component="{Post}" />
...您告诉路由器，如果URL与模式/posts/:id 相匹配，它将呈现 Post 组件，并向其传递<匹配网址的那一部分的code> id 道具.
...you're telling the router that if the URL matches the pattern /posts/:id, it should render the Post component, passing it an id prop that matches that part of the URL.
Post 组件负责根据此内容获取其数据.因此，在这种情况下，您可以将 posts 数组移到一个单独的模块中，并相应地更改 Post.svelte :
The Post component is responsible for fetching its data based on that. So in this case, you could move the posts array into a separate module, and change Post.svelte accordingly:
<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>
(请注意，道具是字符串化的，因为它们是从 href 派生的，因此我们需要进行 == 比较，而不是 === .)
(Note that props are stringified because they're derived from the href, so we need a == comparison rather than ===.)
这篇关于在斯维尔特传递道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
