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

Question

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

Answer 1

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

1. 添加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}/>

2. 添加一个use指令，这也将让你访问原始DOM节点

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

Answer 2

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

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