如何使用JSX将元素重复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的程序应该是什么？

Answer 1

干得好：

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

您可能想要向每个span元素添加键，以便React不会抱怨缺少key属性：

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

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