JSX 및 Lodash를 사용하여 요소를 n회 반복하는 방법

JSX 및 Lodash를 사용하여 요소를 n회 반복하는 방법

원하는 것을 이루기 위해 앱에서 React/JSX와 Lodash를 사용하고 있습니다.

상태에 따라 요소를 일정 횟수 반복해야 합니다.어떻게 하면 좋을까요?

요소는 다음과 같습니다.

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

그리고 이렇게 할당한다:

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

그래서 이 경우, 저는 이 요소를 반복해야 합니다.8Lodash를 사용하는 프로세스는 무엇입니까?

외부 라이브러리를 사용하지 않고 이를 수행하는 가장 빠른 방법은 다음과 같습니다.

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주요 속성을 놓쳤다고 불평하지 않도록 합니다.

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()는 다음 2가지 컨텍스트에서 사용됩니다.

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

Lodash 범위를 사용할 수 있습니다.

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

코드 내 여러 곳에 사용하고 싶은 사람이 있다면 npm 패키지 https://www.npmjs.com/package/repeat-component로 하는 것이 좋다고 생각했습니다.누군가에게 도움이 될 것 같아:)

언급URL : https://stackoverflow.com/questions/34189370/how-to-repeat-an-element-n-times-using-jsx-and-lodash