Javascript 将子类别映射到父类别

我正在返回类别和子类别的数据。这些数据将通过如下方式显示：

[
  {
    "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"
  }
]

在上面的示例中，我知道这两个连接的唯一方法是因为child的ParentCid与ParentCid匹配

我目前正在做的是绘制所有数据，但我想在子类别中添加一个类，我不确定如何区分这两个类别

下面是我映射所有项目的代码

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匹配一个Cid，并且该Cid的ParentCid=0，那么这就是父类别

---

因此，基本上所有具有ParentCid:0的类别都是父类别

您需要从数组中构建一个树。有几种方法可以在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)
}

在这段代码之后，“root”对象应该包含数据的树表示形式，然后您可以使用如下内容重复构建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>
    );
}

---

我不太清楚你在问什么，你能提供更多的细节/例子吗？我编辑了更多的解释，正如你所展示的，有一个父类别和一个子类别。它能有多深？我的意思是可以有孙辈类别或更高级别？@RiteshBansal这只是一个级别，正如您所说，您希望将一个类添加到子类别中，所有ParentCid为0的类别都是父类别。难道你不认为你可以通过比较ParentCid来添加这个类吗==0？我爱你！完美无瑕