Svelte中如何动态渲染同一组件的多个实例？

嘿，这问题我熟！在Svelte里动态创建组件其实很简单，用官方提供的组件实例化API就能搞定，结合你已经写的随机坐标逻辑，咱们一步步来：

第一步：让Star组件支持接收位置参数 #

首先你的Star.svelte需要能接收x和y这两个坐标参数，用来控制自身定位。修改Star组件代码：

<script>
  // 定义可外部传入的props，设置默认值防止未传参出错
  export let x = 0;
  export let y = 0;
</script>

<!-- 用绝对定位把星星放在指定坐标 -->
<div style="position: absolute; left: {x}px; top: {y}px;">
  ⭐
</div>

第二步：修改App.svelte的按钮点击逻辑 #

你已经算出了随机坐标，现在只需要用Svelte的组件构造函数，把Star组件挂载到Sky容器里，同时把坐标传进去就行。直接调整按钮的回调代码：

<script>
  import Moon from "./Moon.svelte";
  import Star from "./Star.svelte"; // 别忘了导入Star组件
</script>

<!-- 务必给Sky容器加position: relative，不然星星会相对于整个页面定位 -->
<div id="thisSky" style="position: relative; width: 200px; height: 200px; border: 1px solid #ccc;">
  <Moon />
</div>

<button on:click={() => {
  const randomX = Math.floor(Math.random() * 200);
  const randomY = Math.floor(Math.random() * 200);
  
  // 动态创建Star组件实例并挂载到Sky容器
  new Star({
    target: document.getElementById("thisSky"), // 指定挂载的父容器
    props: { x: randomX, y: randomY } // 把随机坐标传给Star组件
  });
}}>Add Stars</button>

可选：把逻辑抽成独立函数 #

如果觉得按钮回调里代码太挤，也可以像你之前尝试的那样抽成单独函数，代码结构更清晰：

<script>
  import Moon from "./Moon.svelte";
  import Star from "./Star.svelte";

  function addStar() {
    const randomX = Math.floor(Math.random() * 200);
    const randomY = Math.floor(Math.random() * 200);
    
    new Star({
      target: document.querySelector("#thisSky"),
      props: { x: randomX, y: randomY }
    });
  }
</script>

<div id="thisSky" style="position: relative; width: 200px; height: 200px; border: 1px solid #ccc;">
  <Moon />
</div>

<button on:click={addStar}>Add Stars</button>

关键小提醒 #

一定要给你的Sky容器（#thisSky）加上position: relative;样式，这样Star组件的绝对定位才会相对于Sky容器计算，不然星星会乱跑哦！

内容的提问来源于stack exchange，提问作者Sascha Dörflein