TDesign Tree如何在节点展开时动态加载子节点数据？

星瑶 ☘︎ 提问于 2026-02-18 10:40:34 阅读 6

组件

在用TDesign的Tree组件做权限配置时，想实现展开节点才加载子节点数据。按照文档设置了lazy和onExpand，但展开后子节点没显示，控制台也没报错。

代码是这样写的：


import { Tree } from 'tdesign-react';

const TreeNode = ({ node }) => {
  const handleExpand = () => {
    // 模拟异步请求
    setTimeout(() => {
      node.expand(); // 这里是不是有问题？
      node.appendChildren([{ label: '新节点' }]);
    }, 500);
  };

  return (
    <Tree
      lazy
      onExpand={handleExpand}
      nodes={initialNodes}
    />
  );
};

数据结构没问题，初始节点能显示，展开时函数也执行了，但新节点就是不更新到界面。是appendChildren用法不对吗？

我来解答赞 3 收藏

反馈

1 条解答

博主伊芃 Lv1

你的问题出在对 Tree 组件的使用上，主要是对节点操作的理解有偏差。根据 TDesign 官方文档的说明，appendChildren 并不是直接更新视图的方法，而是用于修改节点数据的辅助方法。Tree 组件的视图更新依赖于 nodes 数据的变化，而不是直接调用节点实例上的方法。

标准写法应该是通过 onExpand 回调来动态更新 nodes 数据，然后让组件重新渲染。以下是修正后的代码示例：

import { Tree } from 'tdesign-react';

import React, { useState } from 'react';



const initialNodes = [

  {

    label: '根节点',

    value: 'root',

    children: [], // 初始为空

  },

];



const TreeNodeExample = () => {

  const [nodes, setNodes] = useState(initialNodes);



  const handleExpand = (node) => {

    if (node.children && node.children.length > 0) return; // 已加载则跳过



    // 模拟异步请求获取子节点数据

    setTimeout(() => {

      const newChildren = [

        { label: '新节点1', value: ${node.value}-1 },

        { label: '新节点2', value: ${node.value}-2 },

      ];



      // 更新节点数据

      const updatedNodes = nodes.map((n) => {

        if (n.value === node.value) {

          return { ...n, children: newChildren };

        }

        return n;

      });



      setNodes(updatedNodes); // 触发视图更新

    }, 500);

  };



  return (

    <Tree

      lazy

      onExpand={handleExpand}

      nodes={nodes}

    />

  );

};



export default TreeNodeExample;

关键点在于：
1. lazy 属性只是告诉 Tree 组件某些节点是懒加载的，但具体加载逻辑需要你自己实现。
2. onExpand 的回调参数 node 是当前展开的节点对象，你需要根据这个对象的标识（比如 value 或其他唯一字段）找到对应的节点并更新它的 children 数据。
3. 更新 nodes 状态后，React 会自动触发组件重新渲染，Tree 组件也会同步展示新的子节点。

你原来的写法中，虽然调用了 appendChildren，但它并没有真正改变 nodes 数据源，所以界面不会更新。按照文档的最佳实践，动态加载子节点的核心就是更新 nodes 数据源，确保数据驱动视图。

顺便吐槽一句，官方文档有时候确实不够直观，我也踩过类似的坑，尤其是涉及到懒加载这种需要手动管理数据的场景。希望这个例子能帮你解决问题。

2026-02-18 11:03