Question

我有一个项目列表，它们是设置页面的复选框。它们存储在const items中，如此：

const ITEMS = [
    ["youtube", "YouTube"],
    ["videos", "Videos"],
    ["facebook", "Facebook"],
    ["settings", "Settings"],
]

目前，这四项仅作为列表项列出。我现在拥有的是：

但我想要的是：

我正在考虑应用检查以查看子类别是否属于该父类别，并将某种类型的缩进应用于子类别。这是可以通过map（这是我如何迭代这个数组）吗？或者有更聪明，更有效的方法来解决这个问题吗？

以下是我如何呈现复选框：

item: function(i) {
    return (
        <div className="checkbox">
            <label>
                <input type="checkbox" checked={this.state.items[i[0]]}/>
                {i[1]}
            </label>
        </div>
    )
}

render: function() {
    return (
        <div className="col-sm-12">
            {_(ITEMS).map(this.item, this)}
        </div>
    )
}

Answer 1

使用一些“脏”代码，您可以使用此代码：https://jsfiddle.net/1sw1uhan/

const ITEMS = [
    ["youtube", "YouTube"],
    ["videos", "Videos"],
    ["facebook", "Facebook"],
    ["settings", "Settings"],
]

var list = $('<ul>');
$.each(ITEMS, function( index, value ) {
	if ((index+1)%2 == 0 && index != 0){
		var sublist = $('<ul>').append($('<li>').text(value[1]).attr('id', value[0]));
	} else {
		var sublist = $('<li>').text(value[1]).attr('id', value[0]);
	}
	list.append(sublist);
})
$('#somediv').append(list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="somediv">

</div>

Answer 2

我建议你在数组中使用对象。因此，您可以将不仅仅属性映射到每个项目。要仅使用普通的Javascript访问它，我会使用for - 循环，因为它与旧浏览器兼容。我可以在这里找到一个例子：

https://jsfiddle.net/morrisjdev/vjb0qukb/

将CSS样式应用于映射项

2 个答案: