1

调用 new Component({ target }) 将组件附加到目标，我想用新组件替换目标的所有旧内容。我怎样才能做到这一点？

4

3 回答 3

4

如果您正在处理服务器渲染的标记，最好使用该hydrate: true选项（此处的文档）。

如果target之前被 Svelte 组件占用，最好调用该组件的$destroy()方法。

否则，最简单的方法就是清空target元素：

target.innerHTML = '';
new Component({ target });
于 2020-05-08T22:32:55.143 回答
1 
function replaceTarget (target) {
    const component = new MySvelteComponent({
        target: target.parentElement,
        anchor: target,
    });
    target.remove();
}

这会将新组件添加到目标元素之前（在目标的父元素中），然后删除目标。

相关文档anchor：https ://svelte.dev/docs#Creating_a_component

与 一起使用可能不是一个好主意target === <body>。

于 2021-01-22T22:47:12.000 回答
0

我遇到了同样的问题，我分别创建 HTML 后备，只是想用完全镜像静态 html 的客户端 Svelte 组件来水合整个 dom。但是，使用文档中的方法会创建两个嵌套<html>元素，因为它是附加到目标而不是替换它。

抓住我想要替换的元素的“父”似乎对我有用：

import App from './App.svelte';

let target = document.querySelector('html').parentNode;

new App({
  target: target,
  hydrate: true
});

在我的具体情况下，可以更简单地写成：

import App from './App.svelte';

new App({
  target: document,
  hydrate: true
});

替换顶级<html>元素会产生一些控制台错误，但这里是屏幕截图和更多详细信息，说明我们如何在项目中实现它以防万一它有帮助：https ://github.com/plentico/lenti/issues/65#issuecomment -696391302

于 2020-09-22T19:20:11.747 回答