我将尝试为SvelteKit创建一个动态更新的导航栏,当前打开的部分会相应地进行格式化。我正在尝试根据路径的第一部分来识别页面,如下所示:
__layout.svelte:
这导致出现了一个“props未定义”的错误,但我本来期望props已经在主布局的
__layout.svelte:
<script context="module">
export const load = ({ page }) => {
return {
props: {
currentSection: `${page.path}`.split('/')[0],
sections: ['home', 'dashboard', 'settings']
}
};
}
</script>
<div class="min-h-screen bg-gray-100">
<Header {...props} />
<slot />
</div>
Header.svelte
<script>
import Menu from "$lib/nav/menu.svelte"
</script>
<Menu {...props}></Menu>
Menu.svelte
<script>
export let sections;
export let currentSection;
</script>
{#each sections as { section }}
<a
href="/{section}"
class="{section == currentSection
? 'bg-gray-900 text-white'
: 'text-gray-300 hover:bg-gray-700'} other-classes"
>{section}</a
>
{/each}
这导致出现了一个“props未定义”的错误,但我本来期望props已经在主布局的
load()
函数的返回值中定义好了(基于文档)。我是否需要明确声明这些props,而不是期望它们可以从load()
函数的返回值中获得?
__layout.svelte
中,因此props从未传递到组件 - 即使load函数返回它们,布局中是否也需要显式声明props?这就是问题的基础。 - Harry__layout
是一个(几乎)像其他任何组件一样的组件。 - Stephane Vanraes