Svelte动态多组件数组点击新增行渲染及TS类型问题求解

核心问题本质是混淆了组件类引用和组件实例两个概念：Svelte的<svelte:component>语法需要接收组件构造函数本身，而非提前手动实例化生成的对象。手动操作DOM创建节点、提前new组件的写法会绕过Svelte的渲染生命周期，才会出现各类渲染异常和报错。

第一步：修正类型定义 #

接口中存储的是组件类的引用，而非组件实例类型，正确类型定义如下：

// 引入Comp1、Comp2组件
import Comp1 from './Comp1.svelte';
import Comp2 from './Comp2.svelte';

export interface ComplexRow {
    comp1: typeof Comp1;
    comp2: typeof Comp2;
    rowId: number; // 行唯一标识，用于循环渲染时做key提升性能
}

let rows: ComplexRow[] = [];
let idCounter = 0;

第二步：实现Add按钮点击逻辑 #

不需要手动操作DOM创建元素、不需要提前实例化组件，Svelte的响应式循环会自动处理DOM生成与挂载，点击函数只需要往数组中推入组件引用和行标识即可：

function add() {
    idCounter++;
    rows.push({
        comp1: Comp1, // 直接传入组件类本身，不要加new关键字
        comp2: Comp2,
        rowId: idCounter
    });
}

如果需要给每一行的组件传入独立的初始参数、回调函数，直接在ComplexRow中新增对应字段存储即可。

第三步：模板层循环渲染 #

通过{#each}循环行数组，内部用<svelte:component>渲染对应组件，Svelte会为每一行的两个组件创建全新的独立实例，自动完成挂载、生命周期绑定、销毁等逻辑，不需要手动传入target挂载节点：

<button on:click={add}> Add </button>
<div id="columnflexbox">
    {#each rows as row (row.rowId)}
        <div class="row" style="display:flex;flex-direction:row">
            <!-- 如需给组件传props，直接在标签上添加属性即可，比如<svelte:component this={row.comp1} initData={row.comp1Data} /> -->
            <svelte:component this={row.comp1} />
            <svelte:component this={row.comp2} />
        </div>
    {/each}
</div>

该写法完全支持多次点击新增多行，所有行内的Comp1、Comp2实例状态完全独立，不会互相干扰。

之前遇到的报错对应原因 #

• 页面显示[object Object]：手动new生成的组件实例是普通JavaScript对象，直接写入模板时Svelte不会识别为可渲染组件，只会将对象默认转成字符串输出
• 触发TypeError: l is not a constructor：<svelte:component>的this属性要求接收组件构造函数，传入手动实例化后的对象时，内部无法调用构造函数生成实例就会报错
• TS类型不匹配报错：初始接口定义的是组件实例类型，而实际需要传入的是组件类本身，通过typeof 组件名获取类的类型后，类型定义就和实际传参完全对齐，不会再报类型错误

注意：如果需要删除某一行，直接操作rows数组删除对应项即可，Svelte会自动销毁对应行的组件实例、移除DOM节点，不需要手动做清理操作。

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