如何在原地强制重启Svelte组件？附实现方案

确实有简便的原地重启Svelte组件的方案，这种思路特别适配以下场景：

• 清空HTML文件输入框的文件列表（直接重置输入框的路径/值通常不可行）
• 基于CSS hover实现的导航栏下拉菜单，选择选项后需要自动收起菜单

虽然针对这些场景可能有其他替代方案，但如果咱们就想采用组件重启的思路，下面分享两种经过验证的实现方式：

方法一：使用动态组件实现重启（上传场景示例） #

这种方式通过切换动态组件的this值为null触发组件销毁，再通过定时器延迟恢复组件引用完成重启，完美适配文件上传后清空输入框的需求。

SomeApp.svelte #

<script>
...
import Upload from "./upload/Upload.svelte";
export let uid; // 来自认证模块的firebase uid

// 上传完成后重启Upload组件，清空<input type="file" />的文件名
let upload_component = Upload;
let restart = false;

$: if (restart) {
    // 将组件引用设为null，触发销毁
    upload_component = null;
    // 用定时器排队执行重启，确保组件已完成销毁
    setTimeout(() => {
        console.log('Upload组件已重启')
        upload_component = Upload
    }, 0);
    console.log('Upload组件重启任务已排队');
    restart = false;
};
...
</script>

<!-- 绑定子组件的finished状态，上传完成时自动触发重启 -->
<svelte:component uid={uid} this={upload_component} bind:finished={restart}/>

Upload.svelte #

<script>
import { onDestroy } from 'svelte';
import { uploadCsv } from './upload.js'

export let uid = null;
export let finished;

function uploadCsvCallback(result) {
    console.log(result);
    finished = true; // 触发父组件的重启逻辑
};

onDestroy(() => {
    console.log('Upload组件已销毁');
});
</script>

<style>
.float-right {
    float: right;
}
</style>

<!-- 选择CSV文件批量导入Firestore集合 -->
<input type="file" name="files" class="float-right" accept=".csv" on:change={uploadCsv(uid, uploadCsvCallback)} />

方法二：通过{#if}块切换实现重启 #

Svelte的特性是：当组件不满足渲染条件时会自动销毁。我们可以利用这一点，通过切换一个布尔变量来控制组件的销毁与重建，这种方式更直观，适合大多数通用场景。

核心逻辑 #

1. 将控制变量（比如run）从true切换为false，销毁目标组件
2. 再将run切换回true，完成组件重启

示例代码 #

<script>
import Upload from "./upload/Upload.svelte";
let run = true; // 初始状态为渲染组件

function restartComponent() {
    run = false; // 触发组件销毁
    setTimeout(() => run = true, 0); // 延迟执行重启，确保组件已完成销毁
}
</script>

{#if run}
<Upload uid={uid} />
{/if}

<!-- 可通过按钮或其他业务事件触发重启 -->
<button on:click={restartComponent}>重启上传组件</button>

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