树
使用树组件显示带有可折叠节点和路径名语法高亮的层级文件与文件夹结构。
使用树组件来展示层级结构，例如文件系统、项目目录或嵌套内容。Tree 组件支持键盘导航和无障碍访问特性。
你可以使用 Markdown 列表或 Tree.Folder 与 Tree.File 组件来编写目录树。<Tree> 与 <FileTree> 是别名，任一标签都可搭配任一语法使用。
如果你需要快速、静态的目录树且每个文件夹都默认可展开，使用 Markdown 列表语法。如果你需要通过 defaultOpen 逐个控制文件夹的展开状态、使用 openable 将文件夹标记为不可交互，或在任意层级混合文件与文件夹，则使用组件语法。
在 <FileTree>（或 <Tree>）中编写嵌套的 Markdown 列表来描述文件夹结构。在名称末尾加上斜杠表示文件夹，或在其下嵌套列表项。包含嵌套项的文件夹默认展开。
- docs/
- index.mdx
- guides/
- configuration.mdx
- docs.config.ts
<FileTree>
- docs/
- index.mdx
- guides/
- configuration.mdx
- docs.config.ts
</FileTree>在开始标签后和结束标签前各留一行空行，以便将列表解析为 Markdown。名称中的行内格式（如 `code`、**bold** 或 _italic_）会被去除，仅在能在你的构建中正确渲染时才使用。
layout.tsx
page.tsx
global.css
package.json
tsconfig.json
<Tree>
<Tree.Folder name="app" defaultOpen>
<Tree.File name="layout.tsx" />
<Tree.File name="page.tsx" />
<Tree.File name="global.css" />
</Tree.Folder>
<Tree.Folder name="lib">
<Tree.File name="utils.ts" />
<Tree.File name="db.ts" />
</Tree.Folder>
<Tree.File name="package.json" />
<Tree.File name="tsconfig.json" />
</Tree>通过将 Tree.Folder 组件相互嵌套来创建深层级结构。
layout.tsx
page.tsx
route.ts
package.json
<Tree>
<Tree.Folder name="app" defaultOpen>
<Tree.File name="layout.tsx" />
<Tree.File name="page.tsx" />
<Tree.Folder name="api" defaultOpen>
<Tree.Folder name="auth">
<Tree.File name="route.ts" />
</Tree.Folder>
<Tree.File name="route.ts" />
</Tree.Folder>
<Tree.Folder name="components">
<Tree.File name="button.tsx" />
<Tree.File name="dialog.tsx" />
<Tree.File name="tabs.tsx" />
</Tree.Folder>
</Tree.Folder>
<Tree.File name="package.json" />
</Tree>Tree 组件支持键盘导航。
- 方向键：在可见条目之间向上或向下移动。
- 右箭头：展开关闭的文件夹，或移动到已展开文件夹的第一个子项。
- 左箭头：收起已展开的文件夹，或移动到父级文件夹。
- Home：跳转到 Tree 中的第一个条目。
- End：跳转到 Tree 中最后一个可见条目。
- Enter/空格：切换文件夹的展开/收起状态。
- *：展开当前层级的所有同级文件夹。
- 前瞻式搜索：输入字符以跳转到以这些字符开头的条目。
namestringrequired在树形结构中显示的文件夹名称。
defaultOpenbooleandefault: false文件夹是否默认展开。
openablebooleandefault: true用户是否可以展开和收起该文件夹。对于不可交互的文件夹，将其设置为 false。
namestringrequired在树状视图中显示的文件名。
Tree.File 仅接受 name prop。
Was this page helpful?Suggest editsRaise issue