Как повторить элемент n раз с помощью JSX

Я использую React / JSX в своем приложении, чтобы выполнить то, что я хочу, также, Lodash.

мне нужно повторить элемент определенное количество раз в зависимости от состояния, как я должен это делать?

вот элемент:

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

и я назначаю его так:

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

поэтому в этом случае мне нужно повторить элемент 8 раз. Каким должен быть процесс с использованием Lodash?

20
javascript lodash react-jsx

5 ответов

здесь вы идете:

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

вы можете добавить ключ к каждому span элемент so React не будет жаловаться на отсутствие ключевого атрибута:

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

подробнее о .times смотрите здесь: https://lodash.com/docs#times

8

самый короткий способ сделать это без каких-либо внешних библиотек:

const n = 8; // Or something else

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

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

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

вы можете сделать это так (без 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>);
    }
}
2

используя _.times: https://jsfiddle.net/v1baqwxv/

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