如何在.ts文件中动态生成Svelte组件（不使用<svelte:component>）

完全可以实现你要的辅助函数，直接利用Svelte内部的组件创建和挂载API即可，以下是具体实现：

辅助函数代码 #

import type { SvelteComponent } from 'svelte';
import { create_component, mount } from 'svelte/internal';

export function renderSvelteComponent(
  component: typeof SvelteComponent,
  props: Record<string, any>
): HTMLElement {
  // 创建组件实例
  const instance = create_component(component);
  
  // 传入组件所需props
  Object.assign(instance.$$.props, props);
  
  // 创建承载组件的容器元素
  const container = document.createElement('div');
  
  // 将组件挂载到容器上
  mount(instance, container, null);
  
  // 返回挂载完成的DOM元素
  return container;
}

使用示例（适配FullCalendar内容注入） #

假设你有一个用于渲染日程的EventCard.svelte组件，在TS文件中可以这样调用辅助函数：

import EventCard from './EventCard.svelte';
import { renderSvelteComponent } from './render-helper';

// FullCalendar配置示例
const calendarConfig = {
  // ...其他日历配置项
  eventContent: (info) => {
    // 渲染Svelte组件并传入日程数据
    const eventDom = renderSvelteComponent(EventCard, {
      title: info.event.title,
      startTime: info.event.start,
      isAllDay: info.event.allDay
    });
    // 返回给FullCalendar用于渲染
    return { domNodes: [eventDom] };
  }
};

注意事项 #

• 这里用到了svelte/internal下的内部API，不属于Svelte官方公开API，版本更新时可能存在兼容性风险，建议锁定Svelte版本或在升级时测试该函数
• 如果需要销毁组件避免内存泄漏，可调用组件实例的$destroy()方法，比如在FullCalendar的事件移除回调中处理：instance.$destroy()
• 若props包含需要响应式更新的数据，直接修改props不会触发组件刷新，可考虑将props包装为Svelte Store传入，或通过组件实例的$set()方法更新

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