主页 / coding / 问题 / 79294098
Accepted
16ar
Asked: 2024-12-19 19:25:14 +0800 CST

服务器端加载 HTML 内容时出现水合问题

  • 772

我正在从 Supabase 存储库加载 HTML 内容。当我显示不带标签的内容时，@html它会显示（作为纯文本），但当我用标签封装它时，{@html ...}什么都不显示，并且我收到hydration_html_changed警告。

需要指出的是，如果我重新保存文件，内容就会正确显示。但重新加载整个页面后，我遇到了问题...

<!-- +page.svelte -->
<script>
    import { page } from '$app/state';
    console.log(page.data.personalMessage); // Logs content correctly
</script>

<h2>Hey !</h2>
<div>
    <!-- Displays HTML content as plain text -->
    {page.data.personalMessage}

    <!-- Nothing shows + hydration_html_changed warning -->
    {@html page.data.personalMessage}
</div>
```
html

1 个回答

  1. Best Answer

    问题似乎出在 SSR 期间为page.data空$app/state。

    作为问题修复时的解决方法，您可以使用常规道具（我通常也会推荐这种级别的道具+page）：

    <script>
  const { data } = $props();
</script>

<div>
  {@html data.personalMessage}
</div>
    • 1

相关问题