javascript - 将 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/