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

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

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

这就是要素:

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

我是这样分配的:

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

所以在这个例子中，我需要重复元素 8次？

132938 次浏览
小开
最佳答案

给你:

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

小开

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

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

你可以这样做(没有 loash) :

var numberOfCards = 8; // or more.


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


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

做这件事最简单的方法是:

const n = 8; // Or something else


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

解决方案没有 loash 或 ES6扩展语法:

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

您可以创建一个数组，其中包含所需呈现的任意数量的项，然后映射数组以呈现所需的正确数量的元素。

const totalItems = 8;


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




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

您可以使用 Lodash 射程。

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

没有任何外部图书馆的直接选择方法(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> )
小开

在没有 Lodash 的情况下实现这一点

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

这是怎么回事？

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

  1. 从类似数组的数据结构中创建数组

    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]

小开

我在用这个，为我自己工作。

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

我认为，如果有人想在代码中的许多地方使用它，那么将其设置为 npm 包是一个好主意: https://www.npmjs.com/package/repeat-component。我认为这对某人有帮助:)


提交答案