マッピング子カテゴリに

Question

私は、データがそうのように見えるて来るのカテゴリーとサブカテゴリーのデータを返すいます：

[ 
    { 
    "Cid": 1284805663, 
    "Name": "PARENT CATEGORY", 
    "ParentCid": 0, 
    "PicUrl": "", 
    "SortOrder": 1, 
    "Type": "manual_type" 
    }, 
    { 
    "Cid": 1284805664, 
    "Name": "CHILD CATEGORY", 
    "ParentCid": 1284805663, 
    "PicUrl": "", 
    "SortOrder": 1, 
    "Type": "manual_type" 
    } 
] 

上記の例では、私はこれらの2が接続されていることを知っている唯一の方法はあるためであります子ParentCidは親のCidと一致します。

私が現在行っていることは、すべてのデータをマッピングすることですが、代わりにサブカテゴリにクラスを追加したいと思います。

以下は、すべてのアイテムをマッピングしている私のコードです。

import React from 'react'; 
import {Link} from 'react-router'; 
import {animateScroll as scroll} from 'react-scroll'; 

class SellerStoreCategories extends React.Component { 
    componentDidUpdate() { 
    // scroll.scrollTo(document.documentElement.scrollTop, { 
    scroll.scrollTo(400, { 
     duration: 0, 
     delay: 0, 
     smooth: false 
    }) 
} 

    render() { 
    return (
     <div className="store__body__menu__accordian"> 
     <ul className="list-unstyled"> 
      {this.props.sellerCats.map((cat) => (
      <li> 
       <Link 
       to={`/seller/${this.props.storeName}/${cat.Cid}`} 
       className={`black-link ${this.props.activeCategory == cat.Cid ? 'active' : ''}`} 
       > 
       {cat.name_en} 
       </Link> 
      </li>)} 
     </ul> 
     </div> 
    ); 
    } 
} 

export default SellerStoreCategories; 

ちょうど私はカテゴリの数百人とその親

ある ParentCidマッチシド場合とシドの ParentCid = 0ほど ParentCidである取り付けられている1知る方法を取得、さらに

を明確にします

したがって、"ParentCid": 0,のカテゴリはすべて親カテゴリです

Answer 1

あなたの配列からツリーを構築する必要があります。これを実現するにはjavascriptでいくつかの方法があります。例えば、このコードの後に​​（コードテストしていない）

let childMap = { 0: [] } 
let root = { Cid: 0, nodes: childMap[0] } 
for (let i = 0; i < sellerCats.length; i++) { 
    let category = sellerCats[i] 
    childMap[category.Cid] = childMap[category.Cid] || [] 
    childMap[category.ParentCid] = childMap[category.ParentCid] || [] 
    category.nodes = childMap[category.Cid] 
    childMap[category.ParentCid].push(category) 
} 

、「ルート」オブジェクトは、あなたがそのようなものでrecusivlyあなたJSXを構築することができ、あなたのデータのツリー表現が含まれている必要があります。

buildCategory(cat) { 
    return (
     <li> 
      <Link 
       to={`/seller/${this.props.storeName}/${cat.Cid}`} 
       className={`black-link ${this.props.activeCategory == cat.Cid ? 'active' : ''}`} 
       > 
       {cat.name_en} 
      </Link> 
      <ul> 
       {cat.nodes && cat.nodes.length ? 
        cat.nodes.map(this.buildCategory) 
       : '' } 
      </ul> 
     </li> 
    ) 
} 

render() { 
    return (
     <div className="store__body__menu__accordian"> 
      <ul className="list-unstyled"> 
       {root.nodes.map(this.buildCategory)} 
      </ul> 
     </div> 
    ); 
}