如何返回 Svelte 组件的渲染 HTML?

Question

我很难制作一个运行use:action的工具提示。我的要求是：

1. 创建以 HTML 或组件作为内容的工具提示
2. 无需将组件包装在<Tooltip><element></Tooltip>
中
3. 挂钩到预制库以实现灵活性

请参阅下面的示例代码。由于 Tippy.js依赖项，它在 REPL 中不起作用，但我确实在我的应用程序中使用它来处理简单的 HTML。这就是为什么我的想法是我应该寻求渲染一个组件，它像任何其他组件一样承认道具，然后以某种方式获取其 HTML 并将其投入使用：action call。(请参阅"内容：">嘿，我工作！它应该像jQuery的工具提示时代一样简单易用。

REPL 链接： https://svelte.dev/repl/e8fdf98eb42445e3b791d7c908581a71?version=3.17.3

Answer 1

要真正"返回渲染的 HTML"，您需要使用generate: 'ssr'选项进行编译，并使用Cmp.render()函数。但是您不能在 DOM 中使用这样的组件...

您无法真正获取组件的内容，但您可以使用这样的操作获取任何元素的 HTML：

<script>
const logHtml = el => {
console.log(el.innerHTML)
}
</script>
<div use:logHtml> ... </div>

或者，简单地说，bind:this元素：

<script>
let el
$: if (el) console.log(el.innerHTML)
</script>
<div bind:this={el}> ... </div>

但是，在您的情况下，似乎您想要的是将组件直接呈现到工具提示的元素中。您可以使用new MyComponent。

下面是使用tippy.js呈现自定义组件的示例操作(请参阅更新的 REPL(：

export function tipz(elem, { content, props, ...opts }) {
let cmp
const tp = tippy(elem, {
onCreate() {
cmp = new content({
target: instance.popper.querySelector(".tippy-content"),
props,
});
},
...opts
})
return {
update(params) {
// ensure reactivity
if (cmp) {
cmp.$set(params.props)
}
},
destroy() {
tp.destroy();
if (cmp) {
// cleanup component
cmp.$destroy();
}
}
};
}