如何使用 JSX 和 Loadsh 重复一个元素 n 次

Question

我在我的应用程序中使用 React/JSX 来完成我想要的，还有 Lodash。

我需要根据条件重复某个元素一定次数。我该怎么做？

这是元素：

 <span className="busterCards">♦</span>;

我是这样分配的：

 let card;
if (data.hand === '8 or more cards') {
  card = <span className='busterCards'>♦</span>;
}

所以在这种情况下，我需要重复元素 8 次。使用 Lodash 的过程应该是怎样的？

原文由 StillDead 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

干得好：

 let card = [];
_.times(8, () => {
  card.push(<span className="busterCards">♦</span>);
});

你可能想为每个 span 元素添加 key 这样 React 就不会抱怨缺少 key 属性：

 let card = [];
_.times(8, (i) => {
  card.push(<span className="busterCards" key={i}>♦</span>);
});

有关 .times 的更多信息，请参阅此处： https ://lodash.com/docs#times

原文由 Long Nguyen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

没有任何外部库 的最短方法：

 const n = 8; // Or something else

[...Array(n)].map((e, i) => <span className="busterCards" key={i}>♦</span>)

原文由 Waiski 发布，翻译遵循 CC BY-SA 3.0 许可协议