JSXはdivを生成し、Iは、フォームの構造を有するアレイ

Question

にプッシュ：

var circle = { 
    'one': {items: []}, 
    'two': {items: []}, 
    'three': {items: []}, 
    'four': {items: []} 
}; 

各itemsアレイは、このような、10件のユニークなdivを保持するべきである：

circle.one.itemsアレイが保持すべきである：

を<div className="item item-1">1</div> ... <div className="item item-10">10</div>

...私はそれらと items配列を移入するにはどうすればよい

<div className="circle-one"> 
    {circle.one.items} 
</div> 

：

<div className="item item-31">31</div> ... <div className="item item-40">40</div>

をそして私は、このような構造を使用しています：

circle.four.items配列を保持する必要がありますdivs？

Answer 1

配列を使用して、配列のループをアイテムに対して行うことができます。

var circle = { 'one': { items: [] }, 'two': { items: [] }, 'three': { items: [] }, 'four': { items: [] } }; 
 

 
['one', 'two', 'three', 'four'].forEach(function (k, i) { 
 
    for (var j = 1; j <= 10; j++) { 
 
     circle[k].items.push('<div className="item item-' + (i * 10 + j) + '">' + (i * 10 + j) + '</div>'); 
 
    } 
 
}); 
 

 
console.log(circle);

Answer 2

あなたがオブジェクトを起動する必要があり考えると、単純なネストされたループはうまく動作します：

createDiv

var keys = ["one","two","three","four"]; 
for (var i = 0; i < keys.length; i++) { 
    for (var j = 0; j < 10; j++) { // Note: you might want to avoid the magic number here 
     circle[keys[i]].items.push(createDiv(i * 10 + j + 1)); 
    } 
} 

は、あなたのitem-xxの番号を取り、あなたがしたい、実際のdivを返す関数です。

ここで注意すべき点は、オブジェクトへのキーを使用して、必要な順序で配列を定義したことです。 はに依存してはならず、たとえばObject.keysは定義された順序でキーを返します。

Answer 3

あなたは文字列としてこれらのdivを望んでいたかどうかわかりません。とにかくpopulateItemsの機能を更新して、あなたが望むものを返すことができます。

var mapping = { one:1, two:2, three:3, four: 4}; 

function populateItems(n) { 
    var output = []; 
    for (var i = 1; i <= 10; i++) { 
    var curr = i+(n-1)*10; 
    output.push('<div className="item item-'+curr+'">+'curr+'</div>'); 
    } 
    return output; 
} 

for (p in circle) { 
    circle[p].items = populateItems(mapping[p]); 
} 

Answer 4

あなたは、アンダースコアを使用する場合/あなたがこれを行うことができlodash：

_.each(circle, (obj) => { 
    obj.items = _.map(_.range(10), (n) => { 
     return <div className={'item item'+n}>n</div> 
    }); 
}); 

私の変数の命名はところでかなりひどいです！