React Tree非一级节点展开时onExpand返回键数组的子节点加载问题

我太懂你这个痛点了！之前用React生态里的树形组件（比如Ant Design Tree）时也踩过一模一样的坑——一级节点展开时能拿到单个键，结果深层节点一展开就返回一串从根到当前节点的路径数组，完全没法直接用来发起请求加载子节点。

下面给你几个实用的解决思路，亲测有效：

1. 利用onExpand的info参数直接拿当前节点 #

现在主流的React Tree组件（比如AntD Tree 4.x+）在触发onExpand时，会传递第二个参数info，里面直接包含当前被操作的节点对象，这是最省心的方式：

const handleExpand = (expandedKeys, info) => {
  // 直接从info里提取当前展开节点的key
  const targetNodeKey = info.node.key;
  
  // 这里发起请求加载该节点的子节点
  fetch(`/api/children?parentKey=${targetNodeKey}`)
    .then(res => res.json())
    .then(data => {
      // 更新树形结构的节点数据
      updateTreeData(targetNodeKey, data);
    });
};

// 在Tree组件中绑定事件
<Tree onExpand={handleExpand} expandedKeys={expandedKeys} />

2. 对比前后展开状态，找出新增的节点键 #

如果你的Tree版本比较旧，没有info参数，那就手动对比前后的expandedKeys数组，找出这次新增的那个键（也就是当前展开的节点）：

// 先在组件状态里保存上一次的展开键数组
const [prevExpandedKeys, setPrevExpandedKeys] = useState([]);

const handleExpand = (currentExpandedKeys) => {
  // 找出当前数组里有但上次数组里没有的键，就是刚展开的节点
  const newlyExpandedKey = currentExpandedKeys.find(
    key => !prevExpandedKeys.includes(key)
  );

  if (newlyExpandedKey) {
    // 发起请求加载子节点
    fetchChildren(newlyExpandedKey);
  }

  // 更新保存的展开键数组
  setPrevExpandedKeys(currentExpandedKeys);
};

3. 自定义节点展开事件（彻底摆脱内置逻辑） #

要是上面两种方法都不合心意，你可以直接给每个节点的展开图标绑定自定义点击事件，完全精准控制：

const renderTreeNode = (node) => {
  return (
    <Tree.TreeNode
      key={node.key}
      title={node.title}
      // 给展开图标绑定自定义事件
      onExpand={() => {
        // 直接拿到当前节点的key，发起请求
        fetchChildren(node.key);
      }}
    >
      {/* 递归渲染子节点，未加载时留空 */}
      {node.children?.map(child => renderTreeNode(child))}
    </Tree.TreeNode>
  );
};

// 在Tree组件中使用自定义渲染
<Tree>{treeData.map(node => renderTreeNode(node))}</Tree>

这个方法的好处是完全不受组件内置onExpand的逻辑干扰，不过需要自己处理展开图标的样式切换（比如展开/折叠状态的图标变化）。

总结一下，最推荐第一种方法，利用组件提供的info参数直接获取目标节点，这是官方设计的标准用法，简洁又靠谱。

内容的提问来源于stack exchange，提问作者Rodius