Tree

何时使用 {#when-to-use}

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

代码演示 {#examples}

<code src="./demo/basic.tsx">基本</code> <code src="./demo/basic-controlled.tsx">受控操作示例</code> <code src="./demo/draggable.tsx">拖动示例</code> <code src="./demo/dynamic.tsx">异步数据加载</code> <code src="./demo/search.tsx">可搜索</code> <code src="./demo/line.tsx">连接线</code> <code src="./demo/customized-icon.tsx">自定义图标</code> <code src="./demo/directory.tsx">目录</code> <code src="./demo/directory-debug.tsx" debug>目录 Debug</code> <code src="./demo/switcher-icon.tsx">自定义展开/折叠图标</code> <code src="./demo/virtual-scroll.tsx">虚拟滚动</code> <code src="./demo/drag-debug.tsx" debug>Drag Debug</code> <code src="./demo/big-data.tsx" debug>大数据</code> <code src="./demo/block-node.tsx">占据整行</code> <code src="./demo/component-token.tsx" debug>组件 Token</code> <code src="./demo/multiple-line.tsx" debug>多行</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code> <code src="./demo/line-debug.tsx" debug>连接线调试</code>

API

通用属性参考：通用属性

Tree props

TreeNode props

DirectoryTree props

注意

在 3.4.0 之前：树节点可以有很多，但在设置 checkable 时，将会花费更多的计算时间，因此我们缓存了一些计算结果（this.treeNodesStates）来复用，避免多次重复计算，以此提高性能。但这也带来了一些限制，当你异步加载树节点时，你需要这样渲染树：

{
  this.state.treeData.length ? (
    <Tree>
      {this.state.treeData.map((data) => (
        <TreeNode />
      ))}
    </Tree>
  ) : (
    'loading tree'
  );
}

Tree 方法

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

主题变量（Design Token）{#design-token}

<ComponentTokenTable component="Tree"></ComponentTokenTable>

FAQ

defaultExpandAll 在异步加载数据时为何不生效？ {#faq-default-expand-all}

default 前缀属性只有在初始化时生效，因而异步加载数据时 defaultExpandAll 已经执行完成。你可以通过受控 expandedKeys 或者在数据加载完成后渲染 Tree 来实现全部展开。

虚拟滚动的限制 {#faq-virtual-scroll-limitation}

虚拟滚动通过在仅渲染可视区域的元素来提升渲染性能。但是同时由于不会渲染所有节点，所以无法自动拓转横向宽度（比如超长 title 的横向滚动条）。

disabled 节点在树中的关系是什么？ {#faq-disabled-node}

Tree 通过传导方式进行数据变更。无论是展开还是勾选，它都会从变更的节点开始向上、向下传导变化，直到遍历的当前节点是 disabled 时停止。因而如果控制的节点本身为 disabled 时，那么它只会修改本身而不会影响其他节点。举例来说，一个父节点包含 3 个子节点，其中一个为 disabled 状态。那么勾选父节点，只会影响其余两个子节点变成勾选状态。勾选两个子节点后，无论 disabled 节点什么状态，父节点都会变成勾选状态。

这种传导终止的方式是为了防止通过勾选子节点使得 disabled 父节点变成勾选状态，而用户无法直接勾选 disabled 父节点更改其状态导致的交互矛盾。如果你有着自己的传导需求，可以通过 checkStrictly 自定义勾选逻辑。