如何根据 Svelte 中的整数多次渲染组件？答案

【问题标题】：How to render a component multiple times based on integer in Svelte?如何根据 Svelte 中的整数多次渲染组件？
【发布时间】：2021-02-25 19:32:01
【问题描述】：

案例：渲染 Button 组件 5 次

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

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

【问题讨论】：

类似于stackoverflow.com/questions/58213585/…

标签： svelte

【解决方案1】：

你可以使用svelte each来做到这一点

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

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

Repl

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

感谢您的回答，但这是一个 Svelte 特定问题
答案的第一部分对 svelte 有效，但最好用 svelte each 展示一个代码示例