この演習では、PackageInfo.svelte
が期待する name
prop を指定し忘れているため、<code>
要素が空になり、npm link が壊れています。
以下のように prop を追加することで、これを修正できます…
App
<PackageInfo
name={pkg.name}
version={pkg.version}
description={pkg.description}
website={pkg.website}
/>
…ただ、pkg
のプロパティはこのコンポーネントが期待する props と一致しているので、代わりに ‘spread’ 構文を使用することができます:
App
<PackageInfo {...pkg} />
逆に、rest プロパティを使用して、そのコンポーネントに渡されたオブジェクトの props を全て受け取ることができます...
let { name, ...stuff } = $props();
...もしくは、destructuring を完全にスキップします:
let stuff = $props();
previous next
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
import PackageInfo from './PackageInfo.svelte';
const pkg = {
name: 'svelte',
version: 5,
description: 'blazing fast',
website: 'https://svelte.dev'
};
</script>
<PackageInfo
version={pkg.version}
description={pkg.description}
website={pkg.website}
/>