如何获取父分类名称？分类树结构设计优化咨询

问题根源 #

你当前的代码存在两个核心问题：

1. 访问categories.pets时，返回的不是Category实例，而是一个包含子分类getter的普通对象——真正的Category('Pets')实例被创建后直接丢弃，导致渲染时category.title无法获取。
2. 子分类与父分类完全独立，没有任何关联关系，后续扩展多层分类时无法回溯父节点信息。

解决方案思路 #

要同时满足链式调用（categories.pets.dishes）和渲染分类树的需求，需要让每个分类节点既是Category实例（保留title等属性），又能挂载子分类供链式访问，同时提供统一的子分类获取方式用于渲染。

最优结构设计 #

修改Category类，使其支持嵌套子分类管理，通过Object.defineProperty把子女分类挂载到父实例上，既保留链式调用能力，又能通过专门的children属性获取子分类集合用于渲染：

改进后的TypeScript代码 #

class Category {
  readonly title: string;
  private _children: Record<string, Category> = {};

  constructor(title: string) {
    this.title = title;
  }

  // 添加子分类并挂载到当前实例，支持链式调用
  addChild(slug: string, title: string): Category {
    const child = new Category(title);
    this._children[slug] = child;
    // 挂载子分类到父实例，非枚举避免遍历干扰
    Object.defineProperty(this, slug, {
      get: () => child,
      enumerable: false
    });
    return child;
  }

  // 获取子分类集合，用于渲染
  get children(): Record<string, Category> {
    return { ...this._children };
  }
}

// 构建分类树
const categories = {
  get pets() {
    const pets = new Category('Pets');
    pets.addChild('dishes', 'Dishes');
    // 支持多层嵌套：pets.addChild('dishes', 'Dishes').addChild('bowls', 'Bowls')
    return pets;
  },
  get cloth() {
    const cloth = new Category('Cloth');
    cloth.addChild('accessories', 'Accessories');
    return cloth;
  }
};

适配后的React渲染代码 #

<ul>
  {Object.entries(categories).map(([slug, category]) => (
    <React.Fragment key={slug}>
      <li>{category.title}</li>
      <ul>
        {Object.entries(category.children).map(([childSlug, child]) => (
          <li key={childSlug}>{child.title}</li>
        ))}
      </ul>
    </React.Fragment>
  ))}
</ul>

方案优势 #

1. 保留原有调用方式：依然可以通过categories.pets.dishes获取子分类实例，传递给Product构造函数。
2. 渲染逻辑清晰：通过category.title直接获取父分类名称，category.children遍历子分类，完全适配React渲染需求。
3. 扩展性强：支持无限层级嵌套，可轻松为Category添加id、slug、getFullPath()等属性或方法。

内容的提问来源于stack exchange，提问作者Pavel Perevezencev