对映射项应用 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

使用一些 'dirty' 代码，您可以使用：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-Loop 因为它与旧浏览器兼容。我做的一个例子，可以在这里找到：

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

对映射项应用 CSS 样式

Apply CSS styling to a mapped item

html

javascript

css

underscore.js

reactjs