Cách lặp lại một phần tử n lần bằng JSX

Tôi đang sử dụng React / JSX trong ứng dụng của mình để đạt được những gì tôi muốn, đồng thời, Lodash.

Tôi cần lặp lại một phần tử một số lần nhất định tùy thuộc vào điều kiện. Tôi nên làm điều đó như thế nào?

Đây là phần tử:

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

Và tôi đang gán nó như thế này:

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

Vì vậy, trong trường hợp này, tôi cần lặp lại phần tử 8times. Quá trình sử dụng Lodash sẽ như thế nào?

Của bạn đây:

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

Bạn có thể muốn thêm khóa vào từng spanphần tử để React không phàn nàn về việc thiếu thuộc tính khóa:

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

Để biết thêm thông tin chi tiết .times, tham khảo tại đây: https://lodash.com/docs#times

Cách ngắn nhất để làm điều này mà không cần bất kỳ thư viện bên ngoài nào :

const n = 8; // Or something else

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

giải pháp không có lodash hoặc cú pháp lây lan ES6:

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

Sử dụng _.times: https://jsfiddle.net/v1baqwxv/

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

Bạn có thể làm như thế này (không cần 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>);
    }
}

Bạn có thể tạo một mảng với bao nhiêu mục mà bạn cần hiển thị và sau đó ánh xạ qua mảng để hiển thị đúng số phần tử bạn cần.

const totalItems = 8;

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


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