从一个函数返回多个元素的数字属性

Question

有没有办法从一个函数返回多个元素，这些元素基于它所接收的数字属性？例如：我有一个硬币元素，它只是一个 <div className="coin"></div>"，我想要一个函数，可以让我说 {displayCoins(5)}，传递给它的参数是要返回的硬币数量。

到目前为止，我尝试过以下方法：

const displayCoins = (numberOfCoins) => {
  let elCoin = document.createElement('div')
  elCoin.className = "coin" 
  return elCoin * numberOfCoins 
}

谢谢

- user15929908

Answer 1

如果你想返回多个元素，可以返回它们的数组。你不需要手动创建DOM元素，比如使用document.createElement('div')，你可以在JSX中直接创建它们或者按照模板创建它们。

const displayCoins = (numberOfCoins) => {
  return [...Array(numberOfCoins).keys()].map(el => (
    <div key={el} className="coin">
  ));
}

- Drew Reese

---

谢谢，使用数组然后进行映射也很有道理！一旦允许我选择，我会将其选为答案。 - user15929908