Skip to main content

この練習問題では、PackageInfo.svelte が期待する version プロパティを指定し忘れているため、'version undefined' が表示されています。

version プロパティを追加することで、これを修正できます…

App.svelte
<PackageInfo
	name={pkg.name}
	speed={pkg.speed}
	version={pkg.version}
	website={pkg.website}
/>

…しかし、pkg のプロパティはこのコンポーネントが期待するプロパティに対応しているので、代わりに 'spread' 構文を使用することができます:

App.svelte
<PackageInfo {...pkg} />

逆に、exportで宣言されていないものも含め、もしコンポーネントに渡されたすべてのプロパティ(props)を参照する必要がある場合は、$$propsで直接参照することができます。これは、Svelteの最適化が難しいため、一般的には推奨されませんが、ごくまれなケースでは便利です。

Next: Logic

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',
		speed: 'blazing',
		version: 4,
		website: 'https://svelte.dev'
	};
</script>
 
<PackageInfo
	name={pkg.name}
	speed={pkg.speed}
	website={pkg.website}
/>
 
initialising