有什么方法可以将组件/html 传递到 Svelte 中的字符串中吗？

Question

我想要实现的是将组件传递到变量的字符串或一些类似的解决方案中。我尝试过 {@html someVariable} 但它只对我有用，它意味着从字符串到 HTML 的文本。但我需要从 HTML 到字符串的文本。我尝试过 document.elementById() 但总是返回“文档未定义”。这是我想要实现的目标的示例：

App.svelte

<script>
import Component from './component.svelte';
import Description  from './description .svelte';


// How to declare component/html into variable?

let test = 'something like <Component /> but acceptable by variable'
let lala = test;

</script>

<Description {test} />  

Description.svelte

<script>
export let lala;
</script>

{#if something}
{@lala html}
{:else if something }
nope
{/if}

我认为这个问题Rendering Svelte Components from HTML string有一定的答案，但我未能使其发挥作用。

Answer 1

我不确定“从 HTML 到字符串的文本”是什么意思，但是如果您想将组件传递给子组件，您可以将其作为 prop 传递：

<!-- App.svelte -->
<script>
    import Component from './Component.svelte';
    import Description  from './Description.svelte';
</script>

<Description component={Component} />  

要显示在变量中定义的组件，您可以使用<svelte:component>特殊元素。

<!-- Description.svelte -->
<script>
    export let component;
</script>

{#if component}
    <svelte:component this={component}></svelte:component>
{:else}
    component isn't set
{/if}

这是一个有效的 Svelte REPL 链接。

如果您想了解有关<svelte:component>特殊元素的更多信息，请查看教程。