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

2022-03-09 00:00:00 reactjs javascript lodash

我在我的应用程序中使用Reaction/JSX是为了实现我想要的,也就是Lodash。

我需要根据条件将一个元素重复一定的次数。我应该怎么做?

以下是元素:

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

我是这样分配的:

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

所以在本例中,我需要将元素重复8次。使用Lodash的过程应该是什么?


解决方案

转到这里:

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

您可能希望向每个span元素添加Key,以便Reaction不会抱怨缺少Key属性:

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

有关.times的详细信息,请参阅此处:https://lodash.com/docs#times

相关文章