Sapper/Svelte 可以有条件地导入组件吗?
it1352
帮助1人
问题说明
在 Sapper 中，我仅在客户端呈现时才尝试导入组件(使用 onMount).有没有类似于 React Suspense 和 React.lazy 的东西?或者还有其他方法吗?
In Sapper I am trying to import a component only if being rendered client side (using onMount). Is there something similar to React Suspense and React.lazy? Or is there another approach?
正确答案
#1
你当然可以那样做，是的:
You can certainly do it that way, yes:
<script>
import { onMount } from 'svelte';
let Thing;
onMount(async () => {
Thing = (await import('./Thing.svelte')).default;
});
</script>
<svelte:component this={Thing} answer={42}>
<p>some slotted content</p>
</svelte:component>
此处演示.
或者，您可以将其包装到一个组件中:
Alternatively, you could wrap that into a component:
<!-- Loader.svelte -->
<script>
import { onMount } from 'svelte';
let loader;
let Component;
onMount(async () => {
Component = (await loader()).default;
});
export { loader as this };
</script>
<svelte:component this={Component} {...$$restProps}>
<slot></slot>
</svelte:component>
{#if !Component}
<slot name="fallback"></slot>
{/if}
<Loader
this={() => import('./Thing.svelte')}
answer={42}
>
<p>some slotted content</p>
<p slot="fallback">loading...</p>
</Loader>
此处演示.这种方法的一个警告是 default 以外的插槽不会被转发"到底层组件.
Demo here. A caveat with this approach is that slots other than default won't be 'forwarded' to the underlying component.
这篇好文章是转载于：学新通技术网
