如何在Svelte同页面用代码片段传递子内容并避免重复代码？

方案1：使用带渲染函数参数的Snippet（推荐） #

你可以让contentTransition snippet接收一个返回Snippet的函数，直接在调用时动态渲染组件并传递参数，完全不需要额外包装组件到单独的snippet中：

{#snippet contentTransition(renderer: () => Snippet)}
    <div transition:fade onoutrostart={takeOutOfStaticFlow}>
        {@render renderer()}
    </div>
{/snippet}

{#await dataPromise}
    <!-- 直接传递渲染加载组件的箭头函数 -->
    {@render contentTransition(() => <CustomDataLoadingProgressComponent />)}
{:then data}
    <!-- 动态传递data参数给数据表格组件 -->
    {@render contentTransition(() => <CustomDataTableComponent data={data} />)}
{/await}

优势： #

• 完全避免冗余的snippet包装（不用单独定义dataLoadingProgress/dataTable）
• 调用时直接处理组件传参，逻辑清晰
• 所有代码保留在当前文件内

方案2：在同文件内定义微型本地组件 #

如果更习惯组件的slot语法，可以在当前文件的<script>中定义一个仅本地使用的微型组件，无需创建独立文件：

<script>
    import { fade } from 'svelte/transition';
    import CustomDataLoadingProgressComponent from './path/to/your/component';
    import CustomDataTableComponent from './path/to/your/component';

    function takeOutOfStaticFlow() {
        // 你的逻辑代码
    }

    // 定义本地组件，仅当前文件可用
    const ContentTransition = {
        props: ['children'],
        template: `
            <div transition:fade onoutrostart={takeOutOfStaticFlow}>
                {@render children}
            </div>
        `,
        exports: { takeOutOfStaticFlow }
    };
</script>

{#await dataPromise}
    <ContentTransition>
        <CustomDataLoadingProgressComponent />
    </ContentTransition>
{:then data}
    <ContentTransition>
        <CustomDataTableComponent data={data} />
    </ContentTransition>
{/await}

优势： #

• 使用熟悉的组件slot语法，可读性高
• 组件逻辑完全封装在当前文件内，不会污染全局

方案3：利用{@render}与匿名Snippet（简化版） #

如果不想写箭头函数，也可以直接在调用时定义匿名snippet：

{#snippet contentTransition(childSnippet: Snippet)}
    <div transition:fade onoutrostart={takeOutOfStaticFlow}>
        {@render childSnippet}
    </div>
{/snippet}

{#await dataPromise}
    {@render contentTransition(() => {
        {#snippet()}
            <CustomDataLoadingProgressComponent />
        {/snippet}
    })}
{:then data}
    {@render contentTransition(() => {
        {#snippet()}
            <CustomDataTableComponent data={data} />
        {/snippet}
    })}
{/await}

这个方案相比方案1稍显繁琐，推荐优先使用方案1。

内容的提问来源于stack exchange，提问作者Seva Golovanov