如何在Svelte中渲染HTML

Question

我尝试过将HTML存储在变量中进行渲染，但是没有成功，我还尝试了三个大括号。

<script>
    let name = 'world';
    let val = ""
    let ans2 = ""
    let ans3;
    import showdown from 'showdown';
    import validity from 'validity-checker';
    function dataSubmit(e){
        e.preventDefault();
    //ans = validity.isEmoji("ggg");
    ans2 = new showdown.Converter();
    ans3 = ans2.makeHtml(val)
    }
</script>

<div>
    <textarea bind:value={val} on:change={dataSubmit}></textarea>
    <div>
    {{{ans3}}}  
    </div>
    
</div>

ans3变量的返回类型类似于"

Hello

"。

- Hypermystic

Answer 1

您可以使用{@html expression}

Svelte在注入HTML之前不会对表达式进行清理。如果数据来自于不可信的来源，您必须对其进行清理，否则可能会导致XSS漏洞，从而危及用户安全。

- CD..

---

这对我不起作用。我得到了实体编码的HTML。 - chovy

@chovy 请查看此工作示例。 - CD..

这只是静态的吗？更新表达式似乎毫无意义。 - Dirk Bester

Answer 2

通常，字符串被插入为纯文本，这意味着像<和>这样的字符没有特殊含义。

但有时候你需要直接将HTML渲染到组件中。例如，你现在正在阅读的文字存在于一个markdown文件中，作为一块HTML代码块包含在这个页面上。

在Svelte中，你可以使用特殊的{@html ...}标签来实现这一点：

<p>{@html string}</p>

Svelte在将{@html ...}中的表达式插入DOM之前不会执行任何清理操作。换句话说，如果您使用此功能，那么必须手动转义来自不可信源的HTML，否则可能会使用户面临XSS攻击的风险。

来源：https://svelte.dev/tutorial/html-tags

- Sateesh

Answer 3

就像Sateesh和CD所回答的那样，{@html expression : string}会将你的HTML字符串渲染为HTML。但是如果你传入一个HTML对象，它将不起作用。

如果你想让Svelte显示在JavaScript中实例化的HTML对象，只需要指定一个目标，并将元素设置为其子元素，或者追加到目标中，就像这样：

let myComponent = document.createElement('div');

document.getElementById('parent').appendChild(myComponent);

反应性仍然保持不变。

- MohaElder