[英]How to repeat an element n times using JSX and Lodash
I am using React/JSX and Lodash in my app in order to accomplish what I want.我在我的应用程序中使用 React/JSX 和 Lodash 来完成我想要的。
I need to repeat an element a certain amount of times depending on a condition.我需要根据条件重复某个元素一定次数。 How should I do that?
我该怎么做?
Here is the element:这是元素:
<span className="busterCards">♦</span>;
And I am assigning it like this:我是这样分配的:
let card;
if (data.hand === '8 or more cards') {
card = <span className='busterCards'>♦</span>;
}
So in this case, I need to repeat the element 8
times.所以在这种情况下,我需要将元素重复
8
次。 What should be the process using Lodash?使用 Lodash 的过程应该是怎样的?
The shortest way to do this without any external libraries :在没有任何外部库的情况下执行此操作的最短方法:
const n = 8; // Or something else
[...Array(n)].map((e, i) => <span className="busterCards" key={i}>♦</span>)
solution without lodash or ES6 spread syntax:没有 lodash 或 ES6 扩展语法的解决方案:
Array.apply(null, { length: 10 }).map((e, i) => (
<span className="busterCards" key={i}>
♦
</span>
));
Here you go:干得好:
let card = [];
_.times(8, () => {
card.push(<span className="busterCards">♦</span>);
});
You may want to add key to each span
element so React won't complain about missing the key attribute:你可能想为每个
span
元素添加 key,这样 React 就不会抱怨缺少 key 属性:
let card = [];
_.times(8, (i) => {
card.push(<span className="busterCards" key={i}>♦</span>);
});
For more info about .times
, refer here: https://lodash.com/docs#times有关
.times
更多信息,请参阅此处: https : .times
<section>
{Array.from({ length: 10 }, (_, i) => <span key={i}>Your text</span>)}
</section>
How does this work?这是如何运作的?
Array.from()
is used in two contexts: Array.from()
在两种情况下使用:
Creating an array from an array-like data structure.从类似数组的数据结构创建数组。 For example, we can convert a map into an array using
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]]
Creating an array and filling out the values (This can be handy when we need to create an array containing more elements)创建一个数组并填写值(当我们需要创建一个包含更多元素的数组时,这会很方便)
Array.from()
accepts an object and a callback function. Array.from()
接受一个对象和一个回调函数。
Array.from({ length: 7 }, (() => 10)) // gives [10,10,10,10,10,10,10]
We can take advantage of the index (second parameter) inside the callback function to provide unique array elements我们可以利用回调函数内部的索引(第二个参数)来提供唯一的数组元素
Array.from({ length: 4 }, ((_, i) => i + 1)) // [1,2,3,4]
Using _.times
: https://jsfiddle.net/v1baqwxv/使用
_.times
: https : _.times
var Cards = React.createClass({
render() {
return <div>cards {
_.times( this.props.count, () => <span>♦</span> )
}</div>;
}
});
You could do it like this (without lodash):你可以这样做(没有 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>);
}
}
You can create an array with as many items as you need rendered and then map through the array to render the correct number of elements you need.您可以创建一个包含您需要渲染的项目数量的数组,然后映射到该数组以渲染您需要的正确数量的元素。
const totalItems = 8;
const items = new Array(totalItems).fill(null);
// .... then
return (
{items.map((_, idx) => <span className="busterCards" key = {idx}>♦</span>)}
);
Straight forward options ways to do that without any external libraries (2021):无需任何外部库的直接选择方法(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> )
I'm using this and works for me.我正在使用它并为我工作。
[...Array(10)].map((elementInArray, index) => (
<div key={index}>
Text in Loop
</div>
))
您可以使用 Lodash range 。
_.range(20).map((_n, i) => <MyComponent key={i}/>)
I thought, that if someone would like to use it in many places in the code, it would be a good idea to make it an npm package: https://www.npmjs.com/package/repeat-component .我想,如果有人想在代码中的许多地方使用它,最好将它设为 npm package: https://www.npmjs.com/package/repeat-component 。 I think it will help someone:)
我认为这会对某人有所帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.