JSX生成div并推送到数组

时间:2016-07-13 14:20:44

标签: javascript reactjs ecmascript-6

我有一个结构形式:

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>

如何使用这些div填充items数组?

4 个答案:

答案 0 :(得分:3)

您可以使用数组并为项目循环数组。

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

答案 1 :(得分:1)

假设您已经启动了对象,那么一个简单的嵌套循环就可以正常工作:

createDiv

其中item-xx是一个函数,它接受Object.keys的数字并返回您想要的实际div。

这里要注意的一件事是我已经按照我想要的顺序定义了一个带有对象键的数组。你不应该依赖,例如{{1}}以任何定义的顺序返回密钥。

答案 2 :(得分:0)

不确定您是否希望将这些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]);
}

答案 3 :(得分:0)

如果你使用下划线/ lodash,你可以这样做:

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

我的变量命名非常糟糕btw!