javascript - JSX 生成 div 并推送到数组

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>

...

circle.four.items数组应包含:

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

我正在使用这样的结构:

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

如何填充 items带有那些 div 的数组？

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);