如何在 Svelte 中根据整数多次渲染组件？

Question

案例：渲染Button组件5次

<script>
  const timesToBeRendered = 5;
</script>

<Button/> //Render this component x (5) times

Answer 1

new Array(timesToBeRendered).fill(0) 将创建一个包含 N 个 0 的空数组，您可以对其进行循环。（是的，需要填写）

new Array(timesToBeRendered).fill(0).map((_, i)=><Button key={i}/>) 将 return 组件列表，这些组件会作为兄弟姐妹呈现。

别忘了key否则react无法区分元素！

Answer 2

您可以使用 svelte each

<script>
  import Button from './Button.svelte'
  const timesToBeRendered = 5;
</script>

{#each Array(timesToBeRendered) as _, index}
  <Button key={index} />
{/each}

Repl

如何在 Svelte 中根据整数多次渲染组件？

How to render a component multiple times based on integer in Svelte?

svelte