JavaScript API 创建 Svelte 元素而不是模板

Question

Svelte 的模板语言很棒，因为它看起来像 HTML。但是，对于高度动态的内容，我需要能够使用 JavaScript 的全部功能，而不仅仅是 #if 和 #each。例如，给定一个树数据结构，我想生成分层 table 标题。 (Demo) 在 React 中，大多数应用程序都使用 JSX 模板，但如果需要，您可以下拉到 createElement。 Svelte 有类似的路径吗？我是否遗漏了一些明显的东西？

Answer 1

我会查看 <svelte:self> 元素，它允许您创建递归调用自身的元素。

https://svelte.dev/tutorial/svelte-self

Answer 2

如果您需要访问 DOM 节点，您可以：

添加 bind:this={node} 以访问 DOM 节点：

<script>
    import {onMount} from 'svelte'

    let node

    onMount(() => {
        const dynamic = document.createElement('a')
        dynamic.innerHTML = "Click me!"

        node.appendChild(dynamic)   
    })
</script>

<div bind:this={node}/>

添加 use 指令，这也将使您能够访问原始 DOM 节点

<script>
    function ninja(node) {
        node.innerHTML = "Kawabunga!"
    }
</script>

<div use:ninja/>

JavaScript API 创建 Svelte 元素而不是模板

JavaScript API to create Svelte elements instead of a template

javascript

svelte