reactjs - 反应递归列表深度

Question

我有一个像这样递归呈现的列表：

  renderHeirachy(heirachy, depth) {
    const list = heirachy.map((folder, index) => {
      let subList;

      if (folder.children && folder.children.length > 0) {
        depth++;
        subList = this.renderHeirachy(folder.children, depth);
      }

      return (
        <li key={index}>
          <Link className="w100 display-block" to={`?folder=${folder.slug}`}>
            <span className="typcn typcn-folder mr1"></span>
            {folder.name}
          </Link>
          {subList}
        </li>
      );
    });

    return (
      <ul className={'wbbroc-list-unstyled wbbroc-list-heirachy ' + 'test'}>
        {list}
      </ul>
    );
  }

然而，问题在于，当我有多个孩子时，深度图会被抛出，例如：

ul
 li -> depth = 1
 li -> depth = 2
ul
 li -> depth = 3

我真的只想要这样的递归深度：

ul
 li -> depth = 1
 li -> depth = 1
ul
 li -> depth = 1

标签： reactjsrecursion

Answer 1

您必须使用类似 BFS 的算法，例如：https ://www.hackerearth.com/practice/algorithms/graphs/breadth-first-search/tutorial/