如何使用JSX重复一次元素n次 [英] How to repeat an element n times using JSX

问题描述

我在我的应用程序中使用React / JSX以实现我想要的，Lodash。

I am using React/JSX in my app in order to accomplish what I want, also, Lodash.

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

I need to repeat an element a certain amount of times depending on a condition, how should I do that?

这是元素：

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

我将这样分配：

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

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

So in this case, I need to repeat the element 8 times. What should be the process using Lodash?

推荐答案

这里你去：

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

您可能想要为每个 span 元素所以React不会抱怨错过关键属性：

You may want to add key to each span element so React won't complain about missing the key attribute:

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

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

For more info about .times, refer here: https://lodash.com/docs#times

这篇关于如何使用JSX重复一次元素n次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！