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

Question

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

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

这是元素:

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

我这样分配它:

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

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

Answer 1

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

const n = 8; // Or something else

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

Answer 2

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

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

Answer 3

干得好:

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

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

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

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

Answer 4

我正在使用这个并且为我工作。

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

Answer 5

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

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

Answer 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>);
    }
}

Answer 7

无需任何外部库即可直接选择的方法（2021）：

\n

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

\n

Array.from( Array(X), (v,i) => <span key={i} className="busterCards">\xe2\x99\xa6</span> )\n// same thing basically \nArray.from( {length:X}, (v,i) => <span key={i} className="busterCards">\xe2\x99\xa6</span> )\n

\n

[...Array(3)].map( (_,i)=> <span key={i} className="busterCards">\xe2\x99\xa6</span> )\n

\n

Answer 8

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

这是如何运作的？

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

1. 从类似数组的数据结构创建数组。例如，我们可以使用以下方法将地图转换为数组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]]

2. 创建一个数组并填写值（当我们需要创建一个包含更多元素的数组时，这会很方便）

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]