动态显示导入组件的多个副本

Question

如何在 Svelte 中动态显示同一个组件的多个副本？

例子：

在我的 App.svelte 中，我有一个名为 Sky 的容器 div。

我展示了一个从单独的文件中导入并以传统方式调用的 Moon 组件：

import Moon from "./Moon.svelte"
... 
<Moon></Moon>

现在我想以同样的方式添加星星，通过导入一个星星组件并在随机位置显示它。我添加了一个“添加星星”按钮并计算了随机数，但我不知道如何调用该组件并将其添加到 Sky 容器 div:

<button on:click={()=> {
    randomX = Math.floor(Math.random()*200);
    randomY = Math.floor(Math.random()*200);
    let sky = document.getElementById("thisSky");
    //Add star to DOM at random left and top position... 
    }}>
    Add Stars
</button>

解法：

我添加了这个功能：

export function addStar() {
   new Star({
    target:     document.querySelector('#sky')
            })
    }

它搜索父组件并将其设置为Star组件的目标。

见 sky.svlete 于：

https://svelte.dev/repl/6c81da4202644303b435327ecbabf82e?version=3.43.1

Answer 1

虽然您的回答有效，但通常来说这是一个不好的模式。在 Svelte 中，你应该尝试让你的 DOM 代表某种 'state' 并避免任何直接的 DOM 操作，就像你在这里所做的那样。

要做到这一点，Svelte-way 是拥有一个星星数组并将一个新星星推送到该数组，然后使用一个 each 块来渲染所有星星：

<script>
 import Star from './Star.svelte';
 let stars = []
 export function addStar() {
   stars = [...stars, {}];
 }
</script>

<div>
  {#each stars as star}
    <Star {...star} />
  {/each}
  <slot />
</div>

通过这种方式，您还可以进一步扩展并让 addStar 实际接收星星的位置并将其传递给组件本身。

它还允许您删除或替换星星，这是您的解决方案无法实现的。

动态显示导入组件的多个副本

Dynamically display multiple copies of an imported component

svelte