使用 Component 就是可以像積木一樣一直組裝，而且不會互相干擾資料，因為每個都是獨立的狀態。不過如果需要大量放置 Component 的話，那麼就可以試試看迴圈，本篇就來講解怎麼在 JSX 中使用迴圈。

Render 多個 Component

在一般如果數量不大時，想要顯示多個 Component，比較直覺的作法可能就像堆積木一樣，一個一個組裝就可以了。

1
2
3
4
5
6
7
8
9
10
ReactDOM.render(
  <div>
    <Counter />
    <Counter />
    <Counter />
    <Counter />
    <Counter />
  </div>,
  document.querySelector("#root")
);

但是如果是大量的 Component 的話，總不可能這樣做，而在 JavaScript 中就會想到可以使用迴圈來處理。
但是，一般的 for 迴圈在 JSX 中沒辦法有回傳值，所以在實例中，會使用的是 map() 來操作。

透過 map 來操作迴圈顯示資料

  1. 生成一個多個元素的陣列

    1
    2
    const counters = Array.from({ length: 6 });
    // [undefined, undefined, ..., undefined]

  2. 透過 map() 來執行迴圈，並帶入 key 值

    1
    2
    3
    {counters.map((item, i) =>
      <Counter key={i} />
    )}

最後可以看看 CodePen 完整的樣式