当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何使用JSX重复一次元素n次》经验,为你挑选了3个好方法。

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

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

这是元素:

?;

我这样分配它:

    let card;
    if (data.hand === '8 or more cards') {
      card = ?;
    }

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



1> Waiski..:

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

const n = 8; // Or something else

[...Array(n)].map((e, i) => ?)


非lodash用户的真棒答案!值得指出它确实需要ES6功能(尽管我认为无论如何在问题中使用'let`意味着它).
对于那些使用Typescript 2+的人来说,这将编译成`Array(3).slice().map(...)`,它们没有达到相同的效果.请参阅@ Jian的答案作为替代.
@KevinWang,因为您的建议将创建一个长度为8的“空”数组,而不是由8个未定义项组成的数组。迭代不适用于前者。在控制台中将其卡住以查看区别。

2> Jian Weihang..:

没有lodash或ES6传播语法的解决方案:

Array.apply(null, { length: 10 }).map((e, i) => (
  
    ?
  
));



3> Long Nguyen..:

干得好:

let card = [];
_.times(8, () => {
  card.push(?);
});

您可能希望为每个span元素添加键,以便React不会抱怨错过键属性:

let card = [];
_.times(8, (i) => {
  card.push(?);
});

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

推荐阅读
jerry613
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有