Як повторити елемент n разів за допомогою JSX

86

Я використовую React / JSX у своєму додатку, щоб виконати те, що я хочу, також, Lodash.

Мені потрібно повторити елемент певну кількість разів залежно від стану. Як мені це зробити?

Ось елемент:

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

І я присвоюю це так:

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

Тож у цьому випадку мені потрібно повторити елемент 8разів. Яким повинен бути процес із використанням Lodash?

javascript reactjs lodash

— StillDead
джерело

4

Як щодо new Array(8).join('♦');?

— undefined

1

Рішення, яке запропонував @Vohuman, - це дуже чистий спосіб зробити роботу. У документах lodash не визначено жодної порівнянної функції .

— Ден Бегін,

2

@Vohuman він створить рядок, тоді як OP хоче створити DOM, використовуючи синтаксис JSX.

— pawel

1

@Vohuman це дивно, але я отримую цілий рядок

— StillDead

1

@pawel ти маєш рацію, ти знаєш, як я можу це зробити?

— StillDead

31

Ось:

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

Ви можете додати ключ до кожного spanелемента, щоб React не скаржився на відсутність атрибута key:

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

Для отримання додаткової інформації .times, зверніться тут: https://lodash.com/docs#times

— Довгий Нгуєн
джерело

1

Я намагаюся призначити це для let card, але це не повторює елемент

— StillDead

1

Або простоconst card = _(8).times(idx => ♦);

— токленд

1

Ви також можете просто повернути _.times (.....), щоб відтворити елементи. Переконайтеся, що ви також використовуєте return (<Element> </ Element) всередині теж.

— msqar

257

Найкоротший спосіб зробити це без будь-яких зовнішніх бібліотек :

const n = 8; // Or something else

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

— Вайскі
джерело

10

Чудова відповідь для користувачів, що не мають лошади! Варто зазначити, що для цього потрібні функції ES6 (хоча, я думаю, це передбачається використанням letпитання у будь-якому випадку).

— псевдорамка

6

Для тих, хто використовує Typescript 2+, це буде компіляція, в Array(3).slice().map(...)якій не буде досягнутий той самий результат. Дивіться відповідь @ Jian нижче як заміну.

— П'єр vDEV

Приємно, дивіться мою відповідь, яка детальніше

— обговорює

2

Чому це не може бути простоArray(n).map((e, i) => ♦)

— Кевін Ван

6

@KevinWang, оскільки ваша пропозиція створить порожній масив довжиною 8, а не масив, що складається з 8 невизначених елементів. Ітерація не спрацює на першій. Вставте його в консоль, щоб побачити різницю.

— Дарбіо

43

рішення без лодаша або синтаксису поширення ES6:

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

— Вейхан Цзянь
джерело

це найкраща відповідь ІМХО

— Уріель

4

Використовуючи _.times: https://jsfiddle.net/v1baqwxv/

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

— pawel
джерело

3

Ви можете зробити це так (без лодашу):

var numberOfCards = 8; // or more.

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

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

— Аллан
джерело

1

Ви можете створити масив із такою кількістю елементів, скільки вам потрібно відтворити, а потім здійснити картографічне відображення масиву, щоб відтворити потрібну кількість потрібних вам елементів.

const totalItems = 8;

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


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

— цеохі
джерело