如何使用 JS 和 Lodash 重复一个元素 n 次答案

【问题标题】：How to repeat an element n times using JSX and Loadsh如何使用 JS 和 Lodash 重复一个元素 n 次
【发布时间】：2016-03-15 08:23:15
【问题描述】：

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

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

这里是元素：

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

我是这样分配的：

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

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

【问题讨论】：

new Array(8).join('♦'); 怎么样？
@Vohuman 建议的解决方案是完成工作的一种非常干净的方法。 lodash docs 中没有定义类似的函数。
@Vohuman 它会生成一个字符串，而 OP 想要使用 JSX 语法创建 DOM。
@Vohuman 这很奇怪，但我正在渲染整个字符串
@pawel 你是对的，你知道我该怎么做吗？

标签： javascript reactjs lodash

【解决方案1】：

无需任何外部库的最短方法：

const n = 8; // Or something else

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

【讨论】：

非 lodash 用户的绝佳答案！值得指出的是，它确实需要 ES6 功能（尽管我认为无论如何在问题中使用 let 暗示了这一点）。
对于那些使用 Typescript 2+ 的人，这将编译成 Array(3).slice().map(...)，但不会达到相同的结果。请参阅下面@Jian 的答案作为替代。
很好，请参阅我的answer 详细说明
为什么不能只是Array(n).map((e, i) => ♦)
@KevinWang 因为您的建议将创建一个长度为 8 的 empty 数组，而不是由 8 个未定义项组成的数组。迭代不适用于前者。将其放入控制台以查看差异。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

给你：

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

你可能想为每个 span 元素添加 key，这样 React 就不会抱怨缺少 key 属性：

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

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

【讨论】：

我正在尝试将其分配给let card，但它不会重复该元素
或者干脆const card = _(8).times(idx => ♦);
你也可以简单地返回 _.times(.....) 来渲染元素。确保你也在里面使用了 return ()。

【解决方案4】：

<section>
      {Array.from({ length: 10 }, (_, i) => <span key={i}>Your text</span>)}
 </section>

这是如何工作的？

Array.from() 在两种情况下使用：

从类似数组的数据结构创建一个数组。例如，我们可以使用Array.from()将地图转换为数组

const map = new Map([ [1, 2], [3, 4], [4, 5] ])

console.log(Array.from(map)) //gives an array - [[1, 2], [3, 4], [4, 5]]
创建一个数组并填写值（当我们需要创建一个包含更多元素的数组时，这会很方便）

Array.from() 接受一个对象和一个回调函数。

Array.from({ length: 7 }, (() => 10)) // gives [10,10,10,10,10,10,10]

我们可以利用回调函数内部的索引（第二个参数）来提供唯一的数组元素

Array.from({ length: 4 }, ((_, i) => i + 1)) // [1,2,3,4]

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

你可以这样做（没有 lodash）：

var numberOfCards = 8; // or more.

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

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

【讨论】：

【解决方案7】：

无需任何外部库（2021 年）的直接选项方法：

// straight forward but without key index. Not so good for react but work fine with worning 
Array(X).fill(<span className="busterCards">♦</span>)
// with index
Array(X).fill().map((v,i)=> <span className="busterCards">♦</span>)

Array.from( Array(X), (v,i) => <span key={i} className="busterCards">♦</span> )
// same thing basically 
Array.from( {length:X}, (v,i) => <span key={i} className="busterCards">♦</span> )

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

【讨论】：

【解决方案8】：

您可以创建一个数组，其中包含您需要渲染的任意数量的项目，然后通过该数组映射以渲染您需要的正确数量的元素。

const totalItems = 8;

const items = new Array(totalItems).fill(null);


// .... then
return (
    {items.map((_, idx) => <span className="busterCards" key = {idx}>♦</span>)}
);

【讨论】：

【解决方案9】：

我正在使用它并为我工作。

[...Array(10)].map((elementInArray, index) => ( 
    <div key={index}>
      Text in Loop
    </div>
))

【讨论】：

【解决方案10】：

您可以使用 Lodash range。

_.range(20).map((_n, i) => <MyComponent key={i}/>)

【讨论】：