File-Tree / 文件树

使用树结构展示文件与文件夹列表。

Basic

所有的文件和文件夹都会被自动排序以便于浏览。

命令式

使用 value 属性渲染一组数据。

额外信息

在文件树中渲染额外的信息。

事件

当文件被点击时会报告层级与路径。

APIs / 接口文档

Tree.Props

属性描述类型推荐值默认
value文件的集合数据Array<FileTreeValue>--
initialExpand默认是否展开boolean-false
onClick文件点击事件(path: string) => void--
...原生属性HTMLAttributes'id', 'title', 'className', ...-

Tree.File.Props

属性描述类型推荐值默认
name(必须的)文件名string--
extra额外文本信息string--
...原生属性HTMLAttributes'id', 'title', 'className', ...-

Tree.Folder.Props

属性描述类型推荐值默认
name(必须的)文件夹名string--
extra额外的文本信息string--
...原生属性HTMLAttributes'id', 'title', 'className', ...-

type FileTreeValue

type FileTreeValue = {
  type: 'directory' || 'file'
  name: string
  extra?: string
  files?: Array<FileTreeValue>
}
Add