使用svelte-loadable懒加载时如何避免传递无关Props？

问题根源很明确：你给不接收playerID的teams/create.svelte组件传了这个属性，哪怕设成undefined，Svelte依然会抛出警告。要解决这个问题，核心就是只给对应组件传递它需要的Props，下面是两种实用的实现方式：

方法一：分条件渲染组件块 #

直接根据loader的值，分别渲染不同的svelte:component块，每个块只传递对应组件需要的属性：

<script lang="ts">
    import Loadable from "svelte-loadable";
  
    export let loader: string;
    // 其他代码
</script>

<Loadable
    loader={loader === "player"
        ? () => import("$lib/../routes/players/create.svelte")
        : () => import("$lib/../routes/teams/create.svelte")
        // 其他组件分支...
    }
    let:component
>
    {#if loader === "player"}
        <svelte:component
            this={component}
            {formName}
            on:SOMETHING={handleSOMETHING}
            {/* 其他公共props */}
            {playerID}
        />
    {:else}
        <svelte:component
            this={component}
            {formName}
            on:SOMETHING={handleSOMETHING}
            {/* 其他公共props */}
            {/* 这里不传递playerID */}
        />
    {/if}
</Loadable>

这种方式直观易懂，每个分支的Props传递清晰，不会出现多余属性。

方法二：动态构建Props对象 #

先定义公共Props，再根据loader的值合并特定属性，最后用展开语法传递给组件：

<script lang="ts">
    import Loadable from "svelte-loadable";
  
    export let loader: string;
    // 其他代码

    // 先定义所有组件都需要的公共Props
    const baseProps = {
        formName,
        onSOMETHING: handleSOMETHING
        // 其他公共props
    };

    // 根据loader类型，决定是否添加playerID
    const componentProps = loader === "player"
        ? { ...baseProps, playerID }
        : baseProps;
</script>

<Loadable
    loader={loader === "player"
        ? () => import("$lib/../routes/players/create.svelte")
        : () => import("$lib/../routes/teams/create.svelte")
        // 其他组件分支...
    }
    let:component
>
    <svelte:component
        this={component}
        {...componentProps}
    />
</Loadable>

这种方式适合Props较多、组件分支多的场景，能让模板更简洁，后续维护也更方便。

内容的提问来源于stack exchange，提问作者Fred Hors