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

How to repeat an element n times using JSX and Lodash

本文关键字：元素 一个 JSX 何使用 Lodash      更新时间：2023-09-26

我在应用程序中使用React/JSX和Lodash来完成我想要的任务。

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

要素如下：

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

我是这样分配的：

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

因此，在这种情况下，我需要重复元素8次。使用Lodash的过程应该是什么？

在没有任何外部库的情况下执行此操作的最短方法：

const n = 8; // Or something else
[...Array(n)].map((e, i) => <span className="busterCards" key={i}>♦</span>)

不带lodash或ES6扩展语法的解决方案：

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

开始：

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

在没有Lodash的情况下实现此功能

<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]

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

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

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

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

你可以这样做（没有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>);
    }
}

在没有任何外部库的情况下实现这一点的直接方法（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> )

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

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

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

所以我今天就这么做了，并提出了这个问题，我认为更好的方法是不创建数组和任何包。哪个是递归


const YourComp = ({ n }) => {
  if (n == 0) {
    return null;
  }
  return (
    <div className="py-8">
     do something
      <YourComp n={n - 1} />
    </div>
  );
};

酷吗？

您可以使用Lodash范围。

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

我想，如果有人想在代码中的许多地方使用它，那么最好将其作为npm包：https://www.npmjs.com/package/repeat-component.我认为它会帮助一些人：）

相关文章：