React Js：可重复的布局

Question

我有一个布局，它会在特定布局中呈现卡片，如第一行3张小卡片，下一行 - 2张中型卡片，第3行有1张大小卡片

let layoutOrder = ['SSS', 'MM', 'LS'];


// code below works fine
let layoutOrder = ['SSS', 'MM', 'LS'];
    let containerList = layoutOrder.map((rowCapacity, idx) =>
        ( <
            rowLayout key = {
                idx.toString()
            }
            rank = {
                idx.toString()
            }
            cardType = {
                rowCapacity
            }
            json = {
                this.getItems(rowCapacity)
            }
            />
        ));
getItems(rowCapacity) {
    let begin;
    let end;
    if (rowCapacity === 'SSS') {
        rowCapacity = 3;
    } else {
        rowCapacity = 2;
    }
    begin = this.counter;
    this.counter += rowCapacity;
    end = this.counter;

    var groupingData = _.extend(this.json);
    let some = groupingData.slice(begin, end);
    return some;
}

我的渲染方法：     render（）{

    return (
        <section className="cards-layout">
            {this.containerList()}
        </section>
            );
 }

现在，有趣的部分：卡的数量可以从1到100+。从上面的代码中，您可能会发现，我基于给定的布局将卡添加到rowLayout组件。

因此上面的代码在遍历layoutOrder时会停止。

**需要/问**：我要找的是：布局应该重复，直到Json对象中有卡片为止。

所以现在，如果我的json有27张牌，上面的代码将在第7次迭代时停止，就是这样。我希望布局应该重复到第27位。

任何帮助将不胜感激。提前致谢。