Передача реквизита в Svelte - PullRequest
Новая
       14

Передача реквизита в Svelte

1 голос
/ 23 июня 2019

Я пытаюсь реализовать довольно стандартное приложение для блогов, используя Svelte, Svelte Routing и Firestore, но мне кажется, что я неправильно понимаю фундаментальную часть того, как реквизиты передаются между компонентами.

Я основал свой исходный код на превосходном учебнике на 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

Ответы [ 2 ]

1 голос
/ 24 июня 2019

При svelte-routing вы не пропускаете реквизиты от компонента <Link>, вы пропускаете их неявно из компонента <Route>. Где у вас это ... 

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

... вы говорите маршрутизатору, что если URL соответствует шаблону /posts/:id, он должен отобразить компонент Post, передав ему id prop, соответствующий этой части URL.

Компонент 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>

(Обратите внимание, что реквизиты являются строковыми, потому что они получены из href, поэтому нам нужно сравнение ==, а не ===.)

Вот рабочая вилка.

0 голосов
/ 23 июня 2019

Простой пример:

Родительский компонент 

<script>
  import PostTeaser from "./PostTeaser.svelte";
  let post = {
    first: 'First prop',
    second: 'Second prop'
  };
</script>

<PostTeaser {...post} />

Дочерний компонент 

<script>
    export let first;
    export let second;
</script>

First prop: {first} <br>
Second prop: {second}

Код здесь: https://codesandbox.io/s/spread-props-using-svelte-y7xou

...