基于嵌套对象列表的动态面包屑JavaScript逻辑求助

遇到的逻辑问题 #

• 点击同一父文件夹下的两个文件夹时，面包屑会同时显示这两个文件夹，而非仅保留最后点击的那个；
• 点击文件夹树中的深层文件夹时，无法展示其完整的上级文件夹路径。

尝试的代码 #

Folders.json #

[
    {
      "name": "Documents",
      "files": [
        {
          "name": "Quarterly Results"
        }
      ]
    },
    {
      "name": "Favourites",
      "files": [
        {
          "name": "Brawl Stars",
          "files": [
            {
              "name": "NS dying in 5 seconds"
            },
            {
              "name": "Josiah raping NS"
            }
          ]
        },
        {
          "name": "Coding",
          "files": [
            {
              "name": "Coding is so fun"
            },
            {
              "name": "I love svelte",
              "files": [
                {
                  "name": "REPL"
                },
                {
                  "name": "oh nooo"
                }
              ]
            }
          ]
        },
        {
          "name": "Favourites 1"
        },
        {
          "name": "Favourites 2"
        },
        {
          "name": "Favourites 3"
        }
      ]
    },
    {
      "name": "Knowledge Base 1"
    }
  ]

Sidebar.svelte #

<script>
export let currentFolder
export let currentFolderFlow
export let expanded = false;
export let name;
export let files;

const sideBarFolder = (folderName) => {
    if (currentFolder === folderName) {
        return false
    }

    currentFolder = folderName

    if (!currentFolderFlow.includes(folderName)) {
        currentFolderFlow = [...currentFolderFlow, folderName]
    } else {
        currentFolderFlow = currentFolderFlow.filter(i => currentFolderFlow.indexOf(i) <= currentFolderFlow.indexOf(folderName))
    }
}
</script>

<button class=" pl-1" on:click={() => sideBarFolder(name)}>{name}</button>

Main 组件 #

<script>
import TreeView from './side-bar.svelte'
let currentFolderFlow = ['Knowledge Base']
let currentFolder = 'Knowledge Base'
</script>

<!-- Breadcrumbs -->
<div class="flex-1 px-3">
    <div class="text-md breadcrumbs border rounded-lg p-3">
        <ul id="breadcrumbs">
            {#each currentFolderFlow as folderFlow}
                <li>{folderFlow}</li>
            {/each}
        </ul>
    </div>
</div>

正确的实现逻辑与代码修改 #

核心问题在于未追踪文件夹的层级关系，当前currentFolderFlow仅记录点击过的文件夹名称，而非从根到当前文件夹的完整路径。需修改逻辑，让每个文件夹点击时传递从根到自身的完整路径，而非单独名称。

步骤1：重构Sidebar为递归组件，传递完整路径 #

<script>
export let folder;
export let currentPath = [];
export let onFolderSelect;

const handleClick = () => {
    // 生成从根到当前文件夹的完整路径
    const newPath = [...currentPath, folder.name];
    onFolderSelect(newPath);
};

let expanded = false;
</script>

<div class="folder-item">
    <button class="pl-1" on:click={handleClick}>
        {#if folder.files && folder.files.length > 0}
            <span on:click|stopPropagation={() => expanded = !expanded}>
                {expanded ? '▼' : '▶'}
            </span>
        {/if}
        {folder.name}
    </button>

    {#if expanded && folder.files && folder.files.length > 0}
        <div class="pl-4">
            {#each folder.files as subFolder}
                <Sidebar 
                    folder={subFolder} 
                    currentPath={[...currentPath, folder.name]} 
                    onFolderSelect={onFolderSelect} 
                />
            {/each}
        </div>
    {/if}
</div>

<style>
.folder-item {
    margin: 4px 0;
}
</style>

步骤2：修改Main组件，接收并渲染完整路径 #

<script>
import Sidebar from './Sidebar.svelte';
import folders from './Folders.json';

let currentFolderFlow = [];

const handleFolderSelect = (path) => {
    currentFolderFlow = path;
};
</script>

<!-- 侧边栏 -->
<div class="sidebar">
    {#each folders as rootFolder}
        <Sidebar 
            folder={rootFolder} 
            currentPath={[]} 
            onFolderSelect={handleFolderSelect} 
        />
    {/each}
</div>

<!-- 面包屑 -->
<div class="flex-1 px-3">
    <div class="text-md breadcrumbs border rounded-lg p-3">
        <ul id="breadcrumbs">
            {#each currentFolderFlow as folderName, index}
                <li>
                    {folderName}
                    {index < currentFolderFlow.length - 1 ? ' / ' : ''}
                </li>
            {/each}
        </ul>
    </div>
</div>

逻辑说明 #

1. 递归层级追踪：Sidebar作为递归组件，每个子文件夹接收父级路径，点击时拼接自身名称形成完整路径，通过onFolderSelect回调传递给父组件；
2. 路径替换机制：每次点击文件夹时，直接用新的完整路径替换currentFolderFlow，解决同一父级下多文件夹共存的问题；
3. 深层路径展示：由于传递的是从根到当前文件夹的完整路径，面包屑自然能展示所有上级文件夹。

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