TDesign Tree组件节点无法展开，如何排查？

这个问题的关键是 TDesign 的 Tree 组件对可展开状态的控制机制和数据字段映射的理解。你虽然设置了 expandable: true 并且有 children，但组件依然不响应点击，大概率是因为以下几个原因中的某一个或多个在作祟。

我们来一步步排查：

第一步，先确认你是否正确使用了 expandedKeys 和 onExpand 这两个关键受控属性

TDesign 的 Tree 是完全受控组件，这意味着：即使节点有 children，默认也不会自动展开。你必须手动通过 expandedKeys 来告诉它哪些节点应该展开，同时监听 onExpand 回调去更新这个状态。这不是 bug，这是设计逻辑。

所以只设置 expandable: true 是不够的，expandable 只是控制「是否显示展开图标」，并不开启自动展开行为。

正确的做法应该是：

import { useState } from 'react';

import { Tree } from 'tdesign-react';



function MyTree() {

  const [expandedKeys, setExpandedKeys] = useState([]);



  const treeData = [

    {

      label: '父节点',

      value: '1',

      children: [

        { label: '子节点', value: '1-1' }

      ],

      // expandable: true; // 可以保留，但其实默认就带箭头了

    }

  ];



  return (

    
      data={treeData}

      expandedKeys={expandedKeys}           // 控制当前展开的节点

      onExpand={(keys) => {                // 用户点击箭头时触发

        console.log('新的展开 keys:', keys);

        setExpandedKeys(keys);              // 更新状态，驱动视图刷新

      }}

      // keyField 指定唯一键，默认是 'value'，没问题

      // labelField 指定标签字段，默认是 'label'，也没问题

    />

  );

}

注意 onExpand 的参数 keys 是一个数组，表示当前所有应该展开的节点 value 值集合。你需要把它存起来，否则点击了也不会持久化展开状态。

第二步，检查你的节点 value 是否具备唯一性

Tree 组件靠 value 字段做 key 匹配。如果你的数据里有两个节点 value 都是 '1'，或者某个 child 的 value 和父节点重复了，就会导致展开状态错乱甚至失效。

确保每个节点的 value 全局唯一。比如改成：

{

  label: '父节点',

  value: 'parent-1',

  children: [

    { label: '子节点', value: 'child-1-1' }

  ]

}

第三步，确认 children 数组里的节点也符合 schema

有时候根节点格式对了，但 children 里面的子节点缺少 label 或 value，会导致渲染异常，进而影响交互。虽然不会直接报错，但某些情况下会静默失败。

建议你在开发阶段加上简单校验：

function validateTreeData(data) {

  data.forEach(node => {

    if (!node.label || !node.value) {

      console.warn('无效节点:', node);

    }

    if (node.children && Array.isArray(node.children)) {

      validateTreeData(node.children);

    }

  });

}

在 setData 前跑一下这个函数，能提前发现问题。

第四步，排除样式或事件冒充干扰

虽然少见，但如果外层容器阻止了事件冒泡（比如用了 event.stopPropagation），或者自定义 render 函数里绑定了原生 click 而没有处理好，也可能导致点击无反应。

另外检查是否有 CSS 设置 pointer-events: none 或者 transform 导致点击穿透偏移（移动端常见）。可以用浏览器开发者工具选中展开箭头元素，看它的事件监听器里有没有绑定 handleClick 类的方法。

第五步，版本问题别忽略

TDesign 在不同版本中对 Tree 的 API 有过调整。比如早期版本用的是 defaultExpandedAll 或 expandAll，而现在的 v1.x 更强调受控模式。

运行一下：

npm list tdesign-react

确保不是太老的版本。如果是 0.39 以下，建议升级，因为旧版存在不少交互 bug。

总结一下：

- expandable: true 只控制图标显示，不启用交互
- 必须配合 expandedKeys + onExpand 实现动态展开
- value 必须唯一，不然状态匹配错乱
- children 节点也要结构完整
- 不要依赖“自动展开”，这是受控组件

你现在的问题八成是没有绑定 onExpand 去更新 expandedKeys。光设 expandedKeys 初始值是没用的，你不更新它，用户操作就不会反映到界面上。

补上状态管理这一环，基本就能解决。我之前也卡过这坑，看着图标能显示就是点不动，最后发现是忘了写 setExpandedKeys……真够折磨的。

这个问题常见的原因有几个方向需要排查。首先，TDesign 的 Tree 组件依赖 expandedKeys 来控制展开状态，你虽然设置了 expandedKeys 但没有效果，可能是 key 的更新没有触发组件响应。你可以检查一下传入的 expandedKeys 是否是一个响应式的数据，例如在 Vue 中使用了 ref 或者 reactive，在 React 中使用了 useState。

其次，确保你的 expandedKeys 的值和节点的 value 能对应上。例如你希望展开 value 为 '1' 的节点，那么 expandedKeys 应该包含 '1'。如果传入了一个不存在的 key，组件不会报错也不会展开。

还有一个容易忽略的点是：虽然你设置了 expandable: true，但 Tree 组件可能默认不识别这个字段。你需要确认是否通过 props 配置了对应的展开属性名，例如在 TDesign 的 Tree 中，可以通过 props.expandable 指定字段名，默认可能是 isLeaf 或 expandable。如果你没有正确配置，组件不会识别你的 expandable: true 是有效的。

举个例子，你可以检查类似这样的配置：

const props = {

  expandable: 'expandable' // 确保和你节点里的字段名一致

}

最后，如果你手动修改 expandedKeys 是通过一个不可变的方式（例如直接赋值而不是创建新数组），可能会导致组件检测不到变化。建议使用类似 setExpandedKeys([...newKeys]) 的方式触发更新。

这几个点都检查一遍，应该能找到问题所在。