我如何 return 渲染 Svelte 组件的 HTML？

Question

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

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

请参阅下面的示例代码。由于 Tippy.js 依赖性，它在 REPL 中不起作用，但我确实在我的应用程序中使用了简单的 HTML。这就是为什么我的想法是我应该寻求呈现一个组件，它像其他任何组件一样承认道具，然后以某种方式获取它的 HTML 并将其放入 use:action 调用中。（参见 "content: 'Hey I work!'"）它应该像 jQuery 的工具提示时代一样简单易用。

REPL link: https://svelte.dev/repl/e8fdf98eb42445e3b791d7c908581a71?version=3.17.3

Answer 1

要真正"return the rendered 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 呈现自定义组件的示例操作（参见 updated 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();
      }
    }
  };
}

我如何 return 渲染 Svelte 组件的 HTML？

How can I return the rendered HTML of a Svelte component?

svelte

svelte-3