有什么办法可以将 component/html 传递给 Svelte 中的字符串吗？

Question

我想要实现的是将组件传递到变量字符串或一些类似的解决方案中。我试过 {@html someVariable} 但它仅以一种方式对我有用，它意味着从字符串到 HTML 的文本。但我需要从 HTML 到字符串的文本。我试过 document.elementById() 但总是得到 return 'document is not defined'。这是我要实现的目标的示例：

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 const lala
</script>

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

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

Answer 1

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

<!-- 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}

这里是working Svelte REPL Link.

如果您想详细了解 <svelte:component> 特殊元素 check out the tutorial。

有什么办法可以将 component/html 传递给 Svelte 中的字符串吗？

Is there any way how to pass component/html into string in Svelte?

javascript

string

components

svelte