Folder文件夹
Folder
文件夹
文件树组件，用于展示层级文件结构。
使用import { Folder } from "@ant-design/x"; |
文档 编辑此页... |
版本自 2.4.0 起支持 |
Ant Design X通用属性参考：通用属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| treeData | 文件树数据 | FolderTreeData[] | [] | - |
| selectable | 是否开启选择功能 | boolean | true | - |
| selectedFile | 选中的文件路径（受控） | string[] | - | - |
| defaultSelectedFile | 默认选中的文件路径 | string[] | [] | - |
| onSelectedFileChange | 文件选择变化时的回调 | (file: { path: string[]; name?: string; content?: string }) => void | - | - |
| directoryTreeWith | 目录树宽度 | number | string | 278 | - |
| emptyRender | 空状态时的展示内容，设为 false 时不展示 | false | React.ReactNode | (() => React.ReactNode) | - | - |
| previewRender | 自定义文件预览内容 | React.ReactNode | ((file: { content?: string; path: string[]; title?: React.ReactNode; language: string }, info: { originNode: React.ReactNode }) => React.ReactNode) | - | - |
| expandedPaths | 展开的节点路径数组（受控） | string[] | - | - |
| defaultExpandedPaths | 默认展开的节点路径数组 | string[] | - | - |
| defaultExpandAll | 是否默认展开所有节点 | boolean | true | - |
| onExpandedPathsChange | 展开/收起变化时的回调 | (paths: string[]) => void | - | - |
| fileContentService | 文件内容服务 | FileContentService | - | - |
| onFileClick | 文件点击事件 | (filePath: string, content?: string) => void | - | - |
| onFolderClick | 文件夹点击事件 | (folderPath: string) => void | - | - |
| directoryTitle | 目录树标题，设为 false 时不展示 | false | React.ReactNode | (() => React.ReactNode) | - | - |
| previewTitle | 文件预览标题 | string | (({ title, path, content }: { title: string; path: string[]; content: string }) => React.ReactNode) | - | - |
| directoryIcons | 自定义图标配置，设为 false 时不展示图标 | false | Record<'directory' | string, React.ReactNode | (() => React.ReactNode)> | - | - |
| contextMenu | 右键菜单配置，支持全局配置和函数形式（根据节点动态返回菜单项）。函数形式接收节点数据和完整路径 key。可被 FolderTreeData 中的 contextMenu 覆盖 | MenuProps['items'] | ((node: FolderTreeData, key: string) => MenuProps['items']) | - | - |
| onRightClick | 右键点击节点时的回调 | function({event, node}) | - | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| title | 显示名称 | string | - | - |
| path | 文件路径 | string | - | - |
| content | 文件内容（可选） | string | - | - |
| children | 子项（仅文件夹类型有效） | FolderTreeData[] | - | - |
| contextMenu | 右键菜单项，设为 false 时禁用该节点的右键菜单。优先级高于全局 contextMenu。函数形式接收完整路径 key | MenuProps['items'] | false | ((key: string) => MenuProps['items']) | - | - |
文件内容服务接口，用于动态加载文件内容。
interface FileContentService {loadFileContent(filePath: string): Promise<string>;}
通过 ref 可以访问组件实例方法。
const folderRef = useRef<FolderRef>(null);// 获取节点const node = folderRef.current?.getNode(['src', 'App.tsx']);// 重命名：不可变更新，返回新的 treeDataconst newData = folderRef.current?.updateNode(['src', 'App.tsx'], {title: 'Main.tsx',path: 'Main.tsx',});// 删除节点const newData = folderRef.current?.deleteNode(['src', 'unused.ts']);// 新增子节点const newData = folderRef.current?.addNode(['src'], {title: 'new.ts',path: 'new.ts',content: '',});
| 方法 | 说明 | 类型 |
|---|---|---|
| getNode | 根据路径获取节点数据 | (path: string[]) => FolderTreeData | undefined |
| updateNode | 不可变更新：合并部分字段到目标节点，返回新的 treeData | (path: string[], data: Partial<FolderTreeData>) => FolderTreeData[] |
| deleteNode | 不可变更新：删除目标节点，返回新的 treeData | (path: string[]) => FolderTreeData[] |
| addNode | 不可变更新：在目标文件夹下新增子节点，返回新的 treeData | (parentPath: string[], node: FolderTreeData) => FolderTreeData[] |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgDirectory | 目录背景色 | string | rgba(0,0,0,0.04) |
基础用法。
自定义文件内容服务。
受控文件选择。
完全受控模式。
可搜索的文件浏览器。
自定义文件图标。
右键菜单。通过 contextMenu 为文件树节点添加右键菜单，支持全局配置和节点级别配置。
使用 previewRender 属性自定义文件预览内容。
previewRender 支持两种形式：
(file, info) => ReactNode，其中：
file: 包含文件信息的对象 { content, path, title, language }info: 包含原始预览节点的对象 { originNode }