代码之家 › 专栏 › 技术社区 › Leonardo Cavalcante

Svelte 5:当对图像使用条件渲染时,表单在页面加载时短暂出现然后消失

svelte-5 svelte forms html javascript

1

Leonardo Cavalcante · 技术社区 · 6 月前

我在Svelte 5组件中遇到了一个奇怪的问题,当页面加载时,一个表单在屏幕上短暂闪烁约半秒,然后消失。当我对图像进行条件渲染(使用{#if})并且如果我删除这两个表单,则会出现bind: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.toLowerCse()的计算结果为false。这会阻止图像渲染,而渲染是预期的行为。然而,我不明白为什么这会导致表单在短暂出现后消失。似乎条件呈现在某种程度上干扰了表单本身的初始呈现。

我尝试过的:

删除{#if}块:无法解决问题。
删除绑定:value={name}:无法解决问题。
删除{#if}和bind:value:解决了表单消失的问题,但显然删除了条件图像显示。

1 回复 | 直到 6 月前

1

0

brunnerh 6 月前

你通常不应该有 <body> 在组件中。使用SvelteKit时 app.html ,添加另一个可能会导致水合时出现运行时错误(请检查浏览器控制台)。

您最初看到的是服务器端渲染的HTML,浏览器通过删除重复的body标记来修复它。一旦JS加载并尝试对页面进行水合处理,它就会在DOM中遍历现在没有元素的地方。