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

Question

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

1. 创建以 HTML 或 Component 作为内容的工具提示
2. 无需将组件包装在 <Tooltip><element></Tooltip>
3. 连接到预制库以获得灵活性

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

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

Answer 1

要真正“返回呈现的 HTML”，您需要使用generate: 'ssr'option进行编译，并使用该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();
      }
    }
  };
}