如何使用JSX将元素重复n次

77

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

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

这是元素：

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

我将其分配为：

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

因此，在这种情况下，我需要重复元素8时间。使用Lodash的程序应该是什么？

javascript reactjs lodash

— 死神
source

4

怎么new Array(8).join('♦');样

— undefined

1

@Vohuman建议的解决方案是完成工作的非常干净的方法。lodash文档中没有定义可比的功能。

— Dan Beghin 2015年

2

@Vohuman它会生成一个String，而OP要使用JSX语法创建DOM。

— Pawel 2015年

1

@Vohuman这很奇怪，但我正在渲染整个字符串

— StillDead 2015年

1

@pawel你是对的，你知道我该怎么做吗？

— StillDead 2015年

30

干得好：

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

— 龙阮
source

1

我正在尝试将其分配给let card，但它没有重复该元素

— StillDead 2015年

1

或者简单地const card = _(8).times(idx => ♦);

— 托克兰

1

您也可以简单地返回_.times（.....）来渲染元素。确保您也使用了return（<Element> </ Element）。

— msqar

237

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

const n = 8; // Or something else

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

— 怀斯基
source

10

对于非现金用户来说，真棒的答案！值得指出的是它确实需要ES6功能（尽管我认为let无论如何在问题中使用它都是隐含的）。

— 伪

6

对于使用Typescript 2+的用户，将Array(3).slice().map(...)无法编译成相同的结果。替代下面的@Jian的答案。

— Pierre vDEV

很好，请参阅我的回答以详细说明

— vsync

1

为什么不能这仅仅是Array(n).map((e, i) => ♦)

— 王刚

5

@KevinWang，因为您的建议将创建一个长度为8的空数组，而不是包含8个未定义项的数组。迭代不适用于前者。在控制台中将其卡住以查看区别。

— 达比奥（Darbio）'19

42

没有lodash或ES6扩展语法的解决方案：

Array.apply(null, { length: 10 }).map((e, i) => (
  <span className="busterCards" key={i}>
    ♦
  </span>
));

— 卫航剑
source

这是最好的答案恕我直言

— Uriel

4

使用_.times：https : //jsfiddle.net/v1baqwxv/

var Cards = React.createClass({
    render() {
        return <div>cards {
          _.times( this.props.count, () => <span>♦</span> )
        }</div>;
    }
});

— 帕维尔
source

3

您可以这样做（不带破折号）：

var numberOfCards = 8; // or more.

if (data.hand >= numberOfCards) {
    var cards = [];

    for (var i = 0; i < numberOfCards; i++) {
        cards[i] = (<span className="busterCards">♦</span>);
    }
}

— 艾伦
source