React JS再帰的ツリー

Question

ReactJSを使って再帰的にツリー構造をレンダリングしようとしています。私はかなり迅速にバニラの例を行った（下記）。今私はこれをReactに移植しています。私はそれをしばらく見ていて、それをどうやって行うのか分かりません。私はバニラの下に私のリアクションの例を入れました。

バニラJS

createTree(data, isSub, lev) { 
let level = lev || 0; 
let html = (isSub) ? '<div class="filter-body">' : ''; // Wrap with div if true 
if (isSub) { level++; } 

for (let i = 0, len = data.length; i < len; i++) { 
    if (typeof(data[i].nested_values) === 'object') { 
     html += '<div class="filter-group level-' + level + '">'; 
     if (isSub) { 
      html += '<div class="filter-heading">' + data[i].value + '</div>'; 
     } else { // Submenu found, but top level list item. 
      html += '<div class="filter-heading">' + data[i].value + '</div>'; 
     } 
     // Submenu found, call function recursively 
     html += this.createTree(data[i].nested_values, true, level); 
     html += '</div>'; 
    } else { 
     html += '<span>' + data[i].value + '</span>' // No submenu, end of tree 
    } 

} 
html += (isSub) ? '</div>' : ''; 
return html; 

}

ReactJSバージョン

私はその後、私のrenderメソッドで出力することの上にマッピングする配列に追加しています。私が頭を包み込むのに苦労している部分は、再帰呼び出しを挿入する方法です。私は非常に近いと感じていますが、あまりにも長い間、それを見ていますか？

createTree(data, isSub, lev) { 
     let level = lev || 0; 
     for (let i in data) { 
      if (typeof(data[i].nested_values) === 'object') { // Sub array found, build structure 
       this.tmpArrB.push(
        <div class={"filter-group level-" + (level)}> 
         <div class="filter-heading">{data[i].value}</div> 
         {this.createTree(data[i].nested_values, true, level)} // How to do this properly? 
        </div> 
       ); 
      } else { // No submenu, bottom of tree 
       this.tmpArrB.push(
        <span key={i}> 
         {data[i].value}    
        </span>); 
      } 
     } 
     this.tmpArr.push(<div className='filter-body open'>{this.tmpArrB}</div>); 
    } 

更新バージョン（作業）

createSelectionHierarchy(data, isSub, level = 1) { 
    let children = []; 
    if (isSub) { level++; } 
    for (let i = 0, len = data.length; i < len; i++) { 
     if (typeof(data[i].nested_values) === 'object') { // Sub array found, build structure 
      children.push(
       <FilterItem key={i} data={data[i]} level={level}> 
        {this.createSelectionHierarchy(data[i].nested_values, true, level)} 
       </FilterItem> 
      ); 
     } else { // No submenu, bottom of tree 
      children.push(
       <span key={i}> 
        {data[i].value}    
       </span>); 
     } 
    } 
    return children; 
} 

ダミーJSON

{ 
    "possible_values": [{ 
     "value": "Fruit", 
     "occurrence_count": 5, 
     "nested_values": [{ 
      "value": "Berries", 
      "occurrence_count": 3, 
      "nested_values": [{ 
       "value": "Strawberry", 
       "occurrence_count": 1 
      }, { 
       "value": "Blackberry", 
       "occurrence_count": 1 
      }, { 
       "value": "Raspberry", 
       "occurrence_count": 1 
      }, { 
       "value": "Redcurrant", 
       "occurrence_count": 1 
      }, { 
       "value": "Blackcurrant", 
       "occurrence_count": 1 
      }, { 
       "value": "Gooseberry", 
       "occurrence_count": 1 
      }, { 
       "value": "Cranberry", 
       "occurrence_count": 1 
      }, { 
       "value": "Whitecurrant", 
       "occurrence_count": 1 
      }, { 
       "value": "Loganberry", 
       "occurrence_count": 1 
      }, { 
       "value": "Strawberry", 
       "occurrence_count": 1 
      }] 
     }, { 
      "value": "Tropical", 
      "occurrence_count": 2, 
      "nested_values": [{ 
       "value": "Pineapple", 
       "occurrence_count": 1 
      }, { 
       "value": "Mango", 
       "occurrence_count": 1 
      }, { 
       "value": "Guava", 
       "occurrence_count": 1 
      }, { 
       "value": "Passion Fruit", 
       "occurrence_count": 1 
      }, { 
       "value": "Dragon Fruit", 
       "occurrence_count": 1 
      }] 
     }] 
    }, { 
     "value": "Vegetable", 
     "occurrence_count": 2, 
     "nested_values": [{ 
      "value": "Potato", 
      "occurrence_count": 3 
     }, { 
      "value": "Leek", 
      "occurrence_count": 3 
     }, { 
      "value": "Onion", 
      "occurrence_count": 3 
     }, { 
      "value": "Sprout", 
      "occurrence_count": 3 
     }, { 
      "value": "Carrot", 
      "occurrence_count": 3 
     }, { 
      "value": "Runner Bean", 
      "occurrence_count": 3 
     }, { 
      "value": "Swede", 
      "occurrence_count": 3 
     }, { 
      "value": "Turnip", 
      "occurrence_count": 3 
     }, { 
      "value": "Parsnip", 
      "occurrence_count": 3 
     }, { 
      "value": "Kale", 
      "occurrence_count": 3 
     }, { 
      "value": "Spinach", 
      "occurrence_count": 3 
     }, { 
      "value": "Artichoke", 
      "occurrence_count": 3 
     }, { 
      "value": "Broad Bean", 
      "occurrence_count": 3 
     }, { 
      "value": "French Bean", 
      "occurrence_count": 3 
     }, { 
      "value": "Brocolli", 
      "occurrence_count": 3 
     }, { 
      "value": "Cauliflower", 
      "occurrence_count": 3 
     }, { 
      "value": "White Cabbage", 
      "occurrence_count": 3 
     }, { 
      "value": "Red Cabbage", 
      "occurrence_count": 3 
     }, { 
      "value": "Savoy Cabbage", 
      "occurrence_count": 3 
     }, { 
      "value": "Corn", 
      "occurrence_count": 3 
     }, { 
      "value": "Courgette", 
      "occurrence_count": 3 
     }, { 
      "value": "Mange Tout", 
      "occurrence_count": 3 
     }, { 
      "value": "Sweet Potato", 
      "occurrence_count": 3 
     }, { 
      "value": "Pak Choi", 
      "occurrence_count": 3 
     }] 
    }] 
} 

Answer 1

これは、他の再帰関数と変わりません。この作業を行うには、関数は何かを返さなければなりません。

このライン

{this.createTree(data[i].nested_values, true, level)} // How to do this properly? 

要素の子としてthis.createTreeの戻り値を渡すことを意味します。あなたの関数は何も返さないので、動作しません。 dataが配列である場合は、代わりにArray#mapを使用することを検討して

createTree(data, isSub, lev) { 
    let level = lev || 0; 
    let children = []; 
    for (let i in data) { 
     if (typeof(data[i].nested_values) === 'object') { // Sub array found, build structure 
      children.push(
       <div class={"filter-group level-" + (level)}> 
        <div class="filter-heading">{data[i].value}</div> 
        {this.createTree(data[i].nested_values, true, level)} 
       </div> 
      ); 
     } else { // No submenu, bottom of tree 
      children.push(
       <span key={i}> 
        {data[i].value}    
       </span> 
      ); 
     } 
    } 
    return <div className='filter-body open'>{children}</div>; 
} 

：

は例を修正しました。