React集合标签递归遍历与层级拼接实现求助

Got it, let's get that recursive tag string working for you! The goal is to turn those nested tags objects into clean strings like "Cartoon > Simpsons family > 2014", right? Your current recursiveTags function is just grabbing the initial tags object—we need to add logic to traverse the nested subTag structure and build the string step by step.

两种实现方式 #

1. 递归版本（贴合你的初始思路） #

这个版本用嵌套函数递归遍历每个层级的标签，直到没有subTag为止：

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      collectionsarr: collections,
      assetsarr: assets,
      clickedassets: [],
      assetsSortingMode: "sortbyname"
    }
  }
  
  recursiveTags(elemId){
    // 先找到对应的集合项
    const collection = this.state.collectionsarr.find(element => element.id === elemId);
    // 处理找不到集合或没有tags的边界情况
    if (!collection || !collection.tags) return '';

    // 内部递归函数，用来拼接标签串
    const buildTagChain = (currentTag) => {
      // 如果当前标签没有subTag，直接返回名称
      if (!currentTag.subTag) {
        return currentTag.name;
      }
      // 否则拼接当前名称和子标签的递归结果
      return `${currentTag.name} > ${buildTagChain(currentTag.subTag)}`;
    };

    return buildTagChain(collection.tags);
  }
  
  render(){
    return (
      <div className="App">
        <h1>Coding challenge</h1>
        <div className="left">
          {this.state.collectionsarr.map(element => 
            <div key={element.id}>
              <p>{this.recursiveTags(element.id)}</p>
            </div>
          )}
        </div>
      </div>
    )
  }
}
export default App

2. 迭代版本（更稳妥，避免递归栈溢出） #

如果你的标签层级可能非常深，递归可能会有栈溢出风险，用循环迭代的方式更安全：

recursiveTags(elemId){
  const collection = this.state.collectionsarr.find(element => element.id === elemId);
  if (!collection || !collection.tags) return '';

  const tagNames = [];
  let currentTag = collection.tags;

  // 循环遍历直到没有subTag
  while (currentTag) {
    tagNames.push(currentTag.name);
    currentTag = currentTag.subTag;
  }

  // 用>连接所有标签名称
  return tagNames.join(' > ');
}

效果验证 #

运行修改后的代码，你会看到每个集合对应的标签串：

• 集合1: Cartoon > Simpsons family > 2014
• 集合2: DC Super heroes > 2014
• 集合3: Disney > Pixar > Original movie > 2010
• 集合4: Ninja > Secret Ninja Force > 2017

两种方式都能完美实现你要的效果，选哪种看你个人偏好和实际场景的层级深度~

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