Как повторить элемент n раз, используя JSX

Question

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

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

Вот элемент:

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

И я задаю его так:

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

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

Answer 1

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

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

Answer 2

Использование _.times: https://jsfiddle.net/v1baqwxv/

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

Answer 3

Вы можете сделать это следующим образом (без 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>); 
    } 
} 

Answer 4

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

const n = 8; // Or something else 

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

Answer 5

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

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