我在使用 Svelte 5 组件时遇到了一个奇怪的问题，当页面加载时，表单会在屏幕上短暂闪烁大约半秒，然后消失。当我对图像进行条件渲染（使用 {#if}）并且绑定：value={name} 如果我删除两个表单时，就会出现这种情况。
<script>
let name = $state('');
let name2 = 'test';
</script>
<body>
<div class="container">
{#if name.toLowerCase() === name2.toLowerCase()}
<img src="example" alt="fantasma" class="fantasma" />
{/if}
<div class="box">
<form class="form-group" action="">
<label for="name" class="pergunta">Seu nome completo</label>
<input type="text" id="name" class="input" bind:value={name} />
<label for="date" class="pergunta">data de nascimento</label>
<input type="date" id="data" class="input" />
</form>
</div>
</div>
</body>
<style>
.fantasma {
width: 24%;
height: auto;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
background-color: #f0f0f0;
margin: 0;
}
.form-group {
display: flex;
flex-direction: column;
align-items: center;
}
.pergunta {
margin-bottom: 7px;
}
.input {
width: 300px;
margin-bottom: 20px;
}
.box {
width: 370px;
height: 180px;
margin: 40px;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 10px;
background-color: red;
border: 2.13px solid #ccc;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
我知道，最初，name 为空（''），因此条件 name.toLowerCase() === name2.toLowerCase() 的计算结果为 false。这会阻止图像渲染，而这是预期的行为。但是，我不明白为什么这会导致表单短暂出现后消失。条件渲染似乎在某种程度上干扰了表单本身的初始渲染。
我尝试过的：
页面上通常不应该有
<body>app.html您最初看到的是服务器端渲染的 HTML，浏览器通过删除重复的 body 标记来修复该 HTML。一旦 JS 加载并尝试水合页面，它就会遍历 DOM，期待有元素，但现在没有元素。