gpt4 book ai didi

javascript - 在 Svelte 中向下传递 Prop

转载 作者:行者123 更新时间:2023-11-29 20:35:49 28 4
gpt4 key购买 nike

我正在尝试使用 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

最佳答案

使用 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.

关于javascript - 在 Svelte 中向下传递 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56722539/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com