将 CSS 样式应用于映射项

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

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

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

Answer 2

使用一些“脏”代码，您可以使用：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>