从 {@html} 指令绑定 svelte 元素

Question

我正在尝试接受用户输入并找到所有看起来像这样的文本 >>523 就像图像板一样。我通过正则表达式替换方法将它们转换为 HTML 模板字符串并清理字符串。然后我用 {@html input} 将字符串放入 svelte 中。它工作得很好，但我有一些问题。

这是 REPL 的 link https://svelte.dev/repl/737a125144474234a100cd871c1d4d5b?version=3.42.6

如果你查看控制台（出于某种原因它让我使用 devtools 控制台，repl 控制台不起作用）你可以看到它让我在那里得到了两个 a 元素，但是 forEach 方法无效

我希望创建的元素 link 到引用的 post。但是一个 post 可以包含许多 quote link 元素。而且我不知道如何获取对它们的变量引用，因为我不能使用 {#each} 我在 onMount:

中尝试了这个

let quotes = document.getElementsByClassName('postlink');
        quotes.forEach((q) => {
            q.addEventListener('mouseover', (e) => {
                console.log('mousing over q:', q);
            });
            q.addEventListener('mouseout', (e) => {
                console.log('mouse left q:', q);
            });
        });

        console.log(quotes);

它在控制台中给我一个类型错误。

未捕获类型错误：quotes.forEach 不是函数

我怎样才能做到这一点？我希望 mouseover 和 mouseout 事件显示 post 引用 link link 的预览。

Answer 1

document.getElementsByClassname returns 一个没有定义forEach函数的NodeList对象，你可以把它解析成这样的数组 [...quotes].forEach

从 {@html} 指令绑定 svelte 元素

bind svelte elements from {@html} directive

javascript

dom

dom-events

svelte

svelte-component