マップされたアイテムにCSSスタイルを適用する

Question

設定ページのチェックボックスであるアイテムのリストがあります。

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

、現在は、これらの4つの項目がちょうどリストアイテムとしてリストされています。これらは、そのようconst itemsに格納されています。私が今持っていることはこれです：

しかし、私が欲しいのはこれです：

サブカテゴリーがそれに属している場合、私は見るためにチェックを適用することを考えていました。サブカテゴリにいくつかのタイプの字下げを適用します。 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) { 
 
\t if ((index+1)%2 == 0 && index != 0){ 
 
\t \t var sublist = $('<ul>').append($('<li>').text(value[1]).attr('id', value[0])); 
 
\t } else { 
 
\t \t var sublist = $('<li>').text(value[1]).attr('id', value[0]); 
 
\t } 
 
\t 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>